AngularFire2：如何在成功登录后导航到主页组件？

Question

我使用 google 登录实现了 Firebase 身份验证（完美运行）。但是我无法在成功登录后导航到我的主页组件。我怎样才能做到这一点？

我已经实施检查以查看我是否已登录，然后导航到主页。它检测到我已登录，但没有导航到我的主页组件。

路线：

const routes: Routes = [
  { path: '', pathMatch: 'full', redirectTo: 'login' },
  { path: 'login', component: LoginSignupComponent },
  { path: 'hc-home', component: HcHomeComponent, children: [
      { path: 'calender', component: CalenderComponent},
      { path: 'attendance', component: AttendanceComponent}
    ], canActivate: [CanActivateGuard]}
];

授权服务：

user$: Observable<User>;

  constructor(private router: Router,
              private afs: AngularFirestore,
              private afAuth: AngularFireAuth) {
    this.user$ = this.afAuth.authState.pipe(
      switchMap(user => {
        if (user) {
          return this.afs.doc<User>(`users/${user.uid}`).valueChanges();
        } else {
          return of(null);
        }
      })
    );
  }

  async googleSignIn() {
    const provider = new auth.GoogleAuthProvider();
    const credential = await this.afAuth.auth.signInWithPopup(provider);
    return this.updateUserData(credential.user);
  }

  async signOut() {
    await this.afAuth.auth.signOut();
    return this.router.navigateByUrl('login');
  }

  private updateUserData(user) {
    const userRef: AngularFirestoreDocument<User> = this.afs.doc(`users/${user.uid}`);
    const data = {
      displayName: user.displayName,
    email: user.email,
    photoURL: user.photoURL,
    uid: user.uid
    };
    return userRef.set(data, { merge: true });
  }

Authguard：

canActivate(next: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<boolean> {
    return this.auth.user$.pipe(
      take(1),
      map(user => !!user),
      tap(loggedIn => {
        console.log(loggedIn);
        if (loggedIn === true) {
          console.log('inside true function');
          this.router.navigate(['/hc-home']);
        }
        if (!loggedIn) {
          console.log('Access Denied');
          this.router.navigateByUrl('login');
        }
      })
    );

我的预期结果是在成功登录后导航到主页（这非常有效）但由于某种原因它发现我已登录并进行了 firebase 身份验证并且我的控制台确认了这一点但我一直停留在我的登录页面上.没有任何错误消息。

Answer 1

如果允许用户导航到指定的 url，则在您的身份验证守卫中，您需要 return true。目前您正在尝试导航到 url，但实际上并没有告诉 angular 允许用户导航到那里。此外，当允许用户导航到主页时，您无需尝试导航到主页。您已经在路线 hc-home 上附加了守卫，所以 angular 已经知道如果允许的话可以到那里。将您的代码更改为：

canActivate(next: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<boolean> {
  return this.auth.user$.pipe(
    take(1),
    map(loggedIn => {
    if (loggedIn) {
      return true;
    }
    this.router.navigateByUrl('login');
    return false;
    }
  })
);

此外，angularfire 也有自己的 authguard 插件，您实际上不需要编写自己的 authguard：https://github.com/angular/angularfire2/blob/master/docs/auth/router-guards.md 就像那里抛出的另一个选项一样。

AngularFire2：如何在成功登录后导航到主页组件？

AngularFire2: How to navigate to Home Component on successful sign in?

routing

typescript

firebase-authentication

angularfire2

angular

路线：

授权服务：

Authguard：