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

Question

我正在尝试将auth0集成到我的角度应用程序中。

Auth0登录事件流程如下所示。

1. 角度页面显示auth0登录小部件（用于显示登录小部件的代码位于服务内部： AuthService ）。

2. 用户从登录小部件中选择身份验证提供程序（例如：使用google登录）。

3. 浏览器被重定向到身份验证提供程序。

4. 用户在身份验证提供程序中输入凭据。

5. 浏览器将重定向回到有角度的站点，再配置的回调URL。 就我而言，这是一个页面，其中显示了加载指示符（因为登录仍未完成）。

6. 使用身份验证令牌从auth0登录小部件触发回调事件。

7. 在回调内部，进行REST调用以获取有关用户的更多信息。

8. REST调用完成后，在将检索到的用户信息保存到本地存储中之后，将调用router.navigateByUrl('/home')以返回主目录。

但是，当我调用router.navigateByUrl('/home') ，导航不会发生。 但是，如果我在大约5秒钟的超时后调用router.navigateByUrl('/home') ，则导航成功完成。 我怀疑要进行导航，应该在进行navigationByUrl navigateByUrl()调用时完成浏览器加载。

有谁知道可靠地进行导航而不用超时的方法？

以下是AuthService代码。

@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，现在可以正常使用了。