如果页面仍在加载，Angular router.navigateByUrl（）无法正常工作

Question

I am trying to integrate auth0 into my angular app.

Auth0 login event flow happens like below.

1. Angular page shows the auth0 login widget (The code for showing the login widget is located inside a service: AuthService ).

2. User picks the authentication provider from the login widget (eg: login with google).

3. Browser gets redirected to the authentication provider.

4. User enters credentials in the authentication provider.

5. Browser gets redirected back to the angular site, to the configured callback URL. In my case, this is a page which shows a loading indicator (since login is still not complete).

6. A callback event gets fired from the auth0 login widget with the authentication token.

7. Inside the callback, A REST call is made to get more information about the user.

8. When the REST call finishes, router.navigateByUrl('/home') is called to return to home, after saving retrieved user information to local storage.

But, when I call router.navigateByUrl('/home') , the navigation doesn't happen. But, if I call router.navigateByUrl('/home') after about a 5 second timeout, the navigation happens successfully. I suspect that for the navigation to happen, browser loading should have completed when the navigateByUrl() call is made.

Does anyone know a way to do the navigation reliably, without using a timeout?

Following is the AuthService code.

@Injectable()
export class AuthService {
    lock = new Auth0Lock(
        'my_client_id',
        'my_auth0_sub_domain',
        {
            auth: {
                redirectUrl: window.location.origin + '/auth_loading',
                responseType: 'token',
                scope: 'openid'
            }
        }
    );

    userProfile: Object;

    constructor(public router: Router) {
        this.userProfile = JSON.parse(localStorage.getItem('profile'));
        this.lock.on("authenticated", (authResult: any) => {
            localStorage.setItem('id_token', authResult.idToken);
            this.lock.getProfile(authResult.idToken, (error: any, profile: any) => {
                if (error) {
                    alert(error);
                    return;
                }
                localStorage.setItem('profile', JSON.stringify(profile));
                this.userProfile = profile;
                setTimeout(() => {
                    this.router.navigateByUrl('/home'); //This only works because of the timeout
                }, 5000);
            });
        });
    }

    public login() {
        this.lock.show();       //This shows the auth0 login widget
    }
}

Answer 1

我将auth0-lock从v10升级到v11，现在可以正常使用了。