Question

当我登录到仪表板并刷新重定向到“登录”页面的页面时，因为我添加了路由器防护。我想避免在该仪表板页面内进行重定向。有什么办法吗？

这是我的路由器防护的结构

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

我的路由如下所示。

const routes: Routes = [
  { path: '' , component : AdminComponent,
    canActivate: [AuthGuard],
     }
  {path: 'userlogin' , component: UserloginComponent},

  { path: 'admin' , 
    component : AdminComponent,
    canActivate: [AuthGuard],
     }]

Answer 1

登录时，需要将用户令牌保存到localStorage并将此信息保存到您的后卫，因此对后端的每次调用都从localStorage发送jwt令牌。发生的情况是，如果您不告诉您的警卫您已登录，则它们的isLoggedIn将为false并将重定向您。将其放入您的警卫构造函数中：

this.localStorage.observe('session')
            .subscribe(loggedIn => Object.assign(this._loggedIn, loggedIn || {}));

登录时请输入以下内容：

this.localStorage.store('session', this._loggedIn);

localStorage是LocalStorageService（ngx-webstorage）的私有变量，您可以使用任何想要的内容。

在Angular 7中，如何避免将项目页面重新加载到个人资料页面中导航到登录页面？

1 个答案: