AngularFire2: как перейти к домашнему компоненту при успешном входе?

Question

Я реализовал аутентификацию Firebase с помощью входа в Google (работает отлично).Но я не могу перейти к своему домашнему компоненту при успешном входе.Как я могу добиться этого?

Я ввел проверку, чтобы убедиться, что я вошел в систему, а затем перейдите к разделу Домой.Он обнаруживает, что я вошел в систему, но не переходит к моему домашнему компоненту.

Маршруты:

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 });
  }

Авторизация:

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

В вашем Auth Guard вы должны в вашем случае вернуть true, если пользователю разрешено переходить по указанному URL.В настоящее время вы пытаетесь перейти к URL, но на самом деле не указываете угол, чтобы позволить пользователю перемещаться туда.Также вам не нужно пытаться перейти к дому, когда пользователю разрешено перемещаться туда.Вы прикрепили охрану на маршруте 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 Так же, как выброшена другая опциятам.