Angular AuthGuard CanActivate не вызывается при выходе из системы - Firebase Auth

Question

AuthGuard CanActivate вызывается правильно после входа в систему, и пользователь перенаправляется на маршрут, с которого он пришел.Проблема возникает, только когда пользователь выходит из системы, CanActivate, похоже, не срабатывает

AuthGuard

@Injectable({
  providedIn: 'root'
})
export class AuthGuard implements CanActivate {
  constructor(private authService: AuthService, private router: Router) {}
  canActivate(
    next: ActivatedRouteSnapshot,
    state: RouterStateSnapshot
  ): Observable<boolean> {
    return this.checkLogin(state.url);
  }

  checkLogin(url: string): Observable<boolean> {
    // Store the attempted URL for redirecting
    this.authService.redirectUrl = url;
    return this.authService.isAuthenticated.pipe(
      tap(auth => (!auth ? this.router.navigate(['login']) : true))
    );
  }
}

AuthService

  get isAuthenticated(): Observable<boolean> {
    return this.angularFireAuth.authState.pipe(
      take(1),
      map(authState => !!authState)
    );
  }

маршруты приложения

export const AppRoutes: Routes = [
  { path: "", redirectTo: "dashboard", pathMatch: "full" },
  { path: "login", component: LoginComponent },
  {
    path: "dashboard",
    component: DashboardComponent,
    canActivate: [AuthGuard]
  },
  { path: "trades", component: TradeComponent, canActivate: [AuthGuard] },
  { path: "profile", component: ProfileComponent, canActivate: [AuthGuard] }
];

@NgModule({
  imports: [RouterModule.forRoot(AppRoutes)],
  exports: [RouterModule]
})
export class AppRoutingModule {}

добавление that.router.navigate (['login']) к logout () работает, но это похоже на взлом, поскольку AuthGuard не запускается.

  logout(): void {
    var that = this;
    this.angularFireAuth.auth.signOut().then(function() {
      localStorage.clear();
      that.router.navigate(['login']);
    });
  }

Одна вещь, которую я могудумаю, что this.angularFireAuth.authState не изменяется при выходе из системы и, следовательно, не вызывает AuthGuard.Это означает, что если бы isAuthenticated () вернул простое логическое значение, для которого было установлено значение false во время выхода из системы, AuthGuard вызовет

Answer 1

Я не вижу, что вы добавили свою охрану в массив провайдеров в AppModule, и это может решить вашу проблему.

@NgModule({
  imports: [
    RouterModule.forRoot([
      {
        path: 'dashboard', 
        component: DashboardComponent,
        canActivate:[AuthGuard],
      }
    ])
  ],
  providers: [AuthGuard]
})
class AppModule {}

Answer 2

Я думаю, вам следует удалить take (1) from:

return this.angularFireAuth.authState.pipe(
    take(1),
    map(authState => !!authState)
);  

С take (1) вы получите данные от наблюдаемых только один раз (когдаВы входите в систему).