Angular2 身份验证卡导航到主页答案

【问题标题】：Angular2 auth card navigate to home pageAngular2 身份验证卡导航到主页
【发布时间】：2018-04-18 21:51:57
【问题描述】：

我是 Angular 2 的新手，实际上我在刷新其重定向到登录页面时遇到了问题，但实际上我想重定向到仪表板

canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<boolean> | boolean {
    // get observable
    const observable = this.store.select(isAuthenticated);
        // redirect to sign in page if user is not authenticated
    observable.subscribe(authenticated => {
      if (!authenticated) {
        this.router.navigate(['/login']);
      }
    });

    return observable;

  }

路由模块：

const routes: Routes = [
  {
    canActivate: [AuthGuard],
    path: "dashboard",
    loadChildren: "./dashboard/dashboard.module#DashboardModule"
  },
  {
    path: "",
    pathMatch: "full",
    redirectTo: "dashboard"
  }
];

【问题讨论】：

标签： angular angular2-routing angular-guards

【解决方案1】：

请详细说明您的问题。无法正确识别您的问题，但据我了解，您可以将警卫写为

canActivate(
next: ActivatedRouteSnapshot,
state: RouterStateSnapshot): Observable<boolean> | Promise<boolean> | boolean {
return this.authService.isLoggedIn
  .take(1)
  .map((isLoggedIn: boolean) => {
    console.log(isLoggedIn)
    if (!isLoggedIn) {
      this.router.navigate(['login']);
      return false;
    }
    return true;
  });
}

在 auth.seervice.ts 中

 private loggedIn = new BehaviorSubject<boolean>(this.loggedInUser());
 get isLoggedIn() {
     if (localStorage.getItem('userDetails'))
        this.loggedIn.next(true);
     return this.loggedIn.asObservable();
  }
loggedInUser(): boolean {
   return JSON.parse(localStorage.getItem('loggedInUser'));
}

现在，当您刷新浏览器时，Guard 将检查登录的用户数据。

如果您想在用户每次刷新浏览器时将用户重定向到仪表板，那么您可以编写

if (!isLoggedIn) {
  this.router.navigate(['login']);
  return false;
}else{
   this.router.navigate(['dashboard']);
   return true;
}

详细解释可以参考这篇文章angular-authentication-using-route-guards和router-guards

【讨论】：