从 canActivate 方法返回 Observable<boolean> 并重定向为 false答案

【问题标题】：Returning an Observable<boolean> from canActivate method and redirect on false从 canActivate 方法返回 Observable<boolean> 并重定向为 false
【发布时间】：2017-11-07 10:13:01
【问题描述】：

我一直在寻找没有运气的解决方案。如果用户被授权，我需要调用服务器并且我需要 canActivate 方法来等待该调用的结果。但我似乎无法拼凑起来。下面是我的代码，我的问题在代码的 cmets 中。

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

    let user: EUser = new EUser();
    user.sessionId = localStorage.getItem("sessionId");

    //I am not sure how to implement this part. 
    // I need to recieve the response and get user.isAuthorized value and return it
    // as an observable. 
    this.authenticationService.isAuthorized(user).subscribe((user)=>{
        //Here i need to get user.isAuthorized and 
        //if the value is false, i need to navigate to login with this.router.navigate['login'] and return it. 
        //if the values it true, i need the code continue as it is. 
    });

  }

身份验证服务

isAuthorized(user:EUser){
    return this.http.post(ConnectionHelper.SERVER_URL+
          ConnectionHelper.USER+ConnectionHelper.ISAUTHORIZED,user).map(res => res.json());
}

【问题讨论】：

后端响应如何？
一个带有用户名、sessionId、isAuthorized 字段的 json 对象。 @Jota.Toledo

标签： angular rxjs angular-router angular-router-guards

【解决方案1】：

您的方法是正确的，您只需将服务器响应映射到bool 值。例如：

export interface AuthState {
    username:string;
    sessionId:string;
    isAuthorized:boolean;
}

isAuthorized(user:EUser): Observable<AuthState> {
    return this.http.post(ConnectionHelper.SERVER_URL+
          ConnectionHelper.USER+ConnectionHelper.ISAUTHORIZED,user)
    .map(res => res.json());
}

// Inject Router instance in the constructor of the guard class
// import required rxjs operators
canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<boolean> {
    let user: EUser = new EUser();
    user.sessionId = localStorage.getItem("sessionId");
    return this.authenticationService.isAuthorized(user)
    .map(user => user.isAuthorized)
    .do(auth => {
      if(!auth){
         this.router.navigate(['/login']);
      }
    });
}

【讨论】：

感谢您的快速回复。在这种方法中，我认为我们遗漏了一些我忘了问的东西:)。如果 user.isAuthorized 为假，我需要将用户重定向到登录页面。 (this.router.navigate['login'])

【解决方案2】：

您可以再次使用promise 和返回值在canActivate 中使用。如果假设isAuthorized 返回boolean 值，您可以使用此代码：

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

let user: EUser = new EUser();
user.sessionId = localStorage.getItem("sessionId");

return this.authenticationService.isAuthorized(user)
  .toPromise()
  .then((isValidUser) => {

    if (!isValidUser) {
      this.router.navigate['login'];
    }
    return isValidUser;
  });

}

注意then 链再次返回Promise，return isValidUser 可以在下一次then 调用中访问。

我使用这种模式，它对我有用。

【讨论】：