Angular 5 路由器在谷歌登录回调中无法正常工作

Posted 2023-03-13

【中文标题】Angular 5 路由器在谷歌登录回调中无法正常工作

【英文标题】：Angular 5 router does not work properly in google login callback

【发布时间】：2018-10-14 22:54:18

【问题描述】：

我正在构建具有登录和仪表板以及简单路由的网络应用程序；

我有两个登录选项和路线：

登录选项：

使用电子邮件：

login(u) 
    this._loginService.login(u)
       .subscribe(data => 
          console.log('Email login successful!');
          this._router.navigate(['/dashboard']);
       );

用谷歌：

googleLogin() 
gapi.auth2.authorize(
    client_id: *
    scope: 'email',
    response_type: 'code',
    prompt: 'select_account'
  ,
  (response) => 
    if (response.error) 
      return;
    
    this._loginService.loginWithGoogle(response)
      .subscribe(response1 => 
        console.log('Google login successful!');
        console.log(response);
        this._router.navigate(['/dashboard']);
      );
  );

路由器选项：

const appRoutes: Routes = [ path: 'dashboard', component: MainComponent, path: 'login', component: LoginComponent

邮箱登录成功后，路由器导航，没有问题。

问题是，当 google 使用 google sign in 登录并且路由器导航到 /dashboard 时，应用程序会以这种方式崩溃：

如果我按下按钮更改路线，它只会显示它的视图并且不会从 dom 中删除我的仪表板。 有时登录页面不会从 dom 中删除 其他函数在我的代码中不起作用。 控制台中没有错误

当我重新加载页面时，一切正常。

【参考方案1】：

要解决这个问题，试试吧！

constructor(private zone: NgZone) 
    ...
    ...

      this.zone.run(() => 
         this._router.navigate(['/dashboard']);
       );

参考：Angular 2 ngOnInit not called