【问题标题】: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.signInWithRedirectthis.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');
        }
    });
    

    控制台日志是 trueshould 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;
        }
      }
      

      【讨论】:

        猜你喜欢
        • 2017-08-03
        • 1970-01-01
        • 2018-10-25
        • 2021-12-17
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        相关资源
        最近更新 更多