如何检查用户是否已通过身份验证以访问特定路径(MEAN STACK)

How to check if a user is authenticated to acess certain path (MEAN STACK)

所以我正在学习 MEAN 堆栈,我正在尝试进行身份验证,我正在使用 passport-local、express-session、passport-mongoose,我不知道你是这样做的还是有更好的方法是,我在我的节点上有一个 get 来检查用户是否已通过身份验证。

exports.isLoggedIn = (req, res) => {
    if (req.isAuthenticated()) {
        res.send(true);
    } else {
        res.send(false);
    }
}

在 angular 我正在通过这种方式使用 http get 进行身份验证服务

isLoggedIn(): Observable<boolean> {
    return this.httpClient.get<boolean>(this.url + '/isLoggedIn', this.httpOptions).pipe(
      retry(2),
      catchError(this.handleError))
  }

现在我的问题是,当用户尝试访问特定路径时,比如说“/profile”,我想用它来检查用户是否经过身份验证,所以在 angular 守卫我在做这个

isLoggedIn: boolean;

canActivate(
    route: ActivatedRouteSnapshot,
    state: RouterStateSnapshot
  ): Observable<boolean> | boolean {  

    this.auth.isLoggedIn().subscribe((isLoggedIn: boolean) =>  {         
      this.isLoggedIn = isLoggedIn;       
    }); 

    return this.isLoggedIn;

   }  

我认为我面临的问题是 http 是异步的,而 canActivate on guard 是同步的,所以当我 运行 这是我第一次未定义,第二次returns 正确的和错误的,但它来自以前的 运行,所以如果用户注销,他仍然可以访问 '/profile' 路径。尝试了一些方法,都失败了,不知道是否应该这样。

让我们把你的问题分成两部分

  1. 您还有其他方法,与护照库的用法大致相同。所以它足够好,没有坏处。

  2. 在前端:

The guard might return its boolean answer synchronously. But in many cases, the guard can't produce an answer synchronously. The guard could ask the user a question, save changes to the server, or fetch fresh data. These are all asynchronous operations.

Accordingly, a routing guard can return an Observable or a Promise and the router will wait for the observable to 'resolve' to true or false.

引用自:https://angular.io/guide/router#milestone-5-route-guards

所以考虑到您在组件中的订阅,您需要 return 您的可观察对象,像这样

return this.auth.isLoggedIn()

没有订阅。并可选择将您的服务更改为 return 布尔值本身。像

isLoggedIn(): Observable < boolean > {
    return this.httpClient.get < boolean > (this.url + '/isLoggedIn', this.httpOptions)
    .pipe(retry(2), tap(val => this.isLoggedIn = true), catchError(this.handleError))
}

有关解决登录服务的更多方法,请参考:https://angular.io/guide/router#resolve-pre-fetching-component-data

希望对您有所帮助。