firebase 身份验证后的离子/角度导航答案

【问题标题】：Ionic/Angular navigation after firebase authfirebase 身份验证后的离子/角度导航
【发布时间】：2021-07-21 13:35:35
【问题描述】：

在我使用 firebase google 登录方法登录后，我想导航到主页。我想不通，为什么导航不起作用。这是我的代码：

async signInWithGoogle() {

 // authentication works:
 await this.afAuth.signInWithRedirect(new firebase.auth.GoogleAuthProvider());

 // but the following code doesn't get executed:
 this.ngZone.run(() => {
  this.router.navigate(['tabs/home']);
 });
}

【问题讨论】：

标签： angular firebase ionic-framework navigation router

【解决方案1】：

对于导航，您应该使用以下方法之一：

this.router.navigate(['tabs', 'home']);

或

this.router.navigateByUrl('/tabs/home');

【讨论】：

感谢您的回答。我尝试了所有不同的导航方式。但是我发现这条线以下的任何代码都不会执行。问题似乎出在其他地方。使用此代码，我希望在异步操作完成后执行以下所有行。但情况似乎并非如此。对此有解释吗？
@Milchgraf 可能this.afAuth.signInWithRedirect 失败。尝试将其包装在 try/catch 中。
我已经试过了。 this.afAuth.signInWithRedirect 或 this.afAuth.signInWithPopup 工作得很好。我还尝试将“.then”链接到此方法this.afAuth.signInWithRedirect(new firebase.auth.GoogleAuthProvider()).then()
@Milchgraf 如果您删除/评论this.afAuth.signInWithRedirect 行，导航是否有效？你检查了run()里面的电话吗？是来电吗？你有导航的守卫吗？并尝试在没有ngZone.run() 的情况下导航
是的，我在 /tabs/home 上有一个守卫。当我使用this.afAuth.signInWithPopup 时，run() 中的代码会被执行，但导航不起作用。我认为这是因为 /tabs/home 上的守卫。当我使用this.afAuth.signInWithRedirect 时，我必须通过this.afAuth.getRedirectResult() 检查重定向结果。此方法必须在登录页面上的ngOnInit() 中运行。但是只有当我关闭 /tabs/home 上的保护时，导航才有效。

【解决方案2】：

我的后卫看起来像：

canLoad(
    route: Route,
    segments: UrlSegment[]): Observable<boolean | UrlTree> | Promise<boolean | UrlTree> | boolean | UrlTree {

    if (!this.authService.isLoggedIn) {
      this.router.navigateByUrl('welcome');
    }

    return this.authService.isLoggedIn;
}

isLoggedIn getter 看起来像：

get isLoggedIn() {
    const user = JSON.parse(localStorage.getItem('user'));
    return (user !== null && user.emailVerified !== false) ? true : false;
}

我的猜测是返回值是假的，因为其余的工作是异步的

我向 authService 添加了一个 getAuthState 方法，该方法返回一个布尔值，但异步：

async getAuthState() {
    const result = await this.afAuth.getRedirectResult();
    if (result.user) {
      return true;
    } else {
      return false;
    }
}

并将守卫更新为如下所示：

canLoad(
    route: Route,
    segments: UrlSegment[]): Observable<boolean | UrlTree> | Promise<boolean | UrlTree> | boolean | UrlTree {
    if (!this.authService.isLoggedIn) {
      this.router.navigateByUrl('welcome');
    } else {
      return this.authService.isLoggedIn;
    }

    if (!this.authService.getAuthState()) {
      this.router.navigateByUrl('welcome');
    }
    return this.authService.getAuthState();
}

在登录页面中我添加了：

this.authService.getAuthState().then(result => {
    console.log(result);
    if (result) {
      console.log('should redirect');
      this.router.navigateByUrl('/tabs/home');
    }
});

控制台日志是 true 和 should redirect，但它没有重定向到 /tabs/home。

也许我需要做一些研究.. Here I found a similar issue

【讨论】：

【解决方案3】：

我找到了 auth-guard here 的解决方案

登录组件：

ngOnInit() {
  this.authService.getAuthState().then(result => {
    if (result) {
      this.router.navigateByUrl('/tabs/home');
    }
  });

  if (this.authService.isLoggedIn) {
    this.router.navigateByUrl('tabs/home');
  }
}

身份验证：

return new Promise((resolve, reject) => {
  firebase.auth().onAuthStateChanged((user: firebase.User) => {
    if (user) {
      resolve(true);
    } else {
      this.router.navigate(['/welcome']);
      resolve(false);
    }
  });
});

在身份验证服务中，我只执行登录并对重定向结果进行身份验证：

async signInWithGoogle() {
  await this.afAuth
 .signInWithRedirect(new firebase.auth.GoogleAuthProvider());
}

async getAuthState() {
  const result = await this.afAuth.getRedirectResult();
  if (result.user) {
    return true;
  } else {
    return false;
  }
}

【讨论】：