制作正确的 Angular 后卫的困难

Question

我的任务很简单，就是可以，但我不明白为什么它不能很好地工作。 我尝试制作一个保护路线，以保护除具有“管理员”角色的用户之外的所有用户。

如何检查？我使用用户 api_token 向我的 api 服务器发送请求，服务器检查令牌，并向我发送带有“true”（具有角色）或 false 的响应。 在这部分中，一切都完美无缺。 当我尝试完全在警卫中使用此响应时出现问题

这里有我的服务代码和我的警卫。 第一个：

    isAdmin(apiToken: string): Observable<string> {
    const params = new FormData();
    params.append('api_token', apiToken);
    return this.http.post(this.urlConfig.IS_ADMIN, params)
      .pipe(map(resp => ResultResponse.fromJson(resp)))
      .pipe(map(ResResp => ResResp.response));
  }

后卫：

admin = false;
token;

constructor(private httpAuthService: HttpAuthService,
              @Inject(MessagesService) private msgService: MessagesService, private pRouter: Router) {
  }

canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<boolean | UrlTree> | boolean | UrlTree {
    if (localStorage.length > 0) {
      const data = JSON.parse(localStorage.getItem('tokenData'));
      this.token = data.api_token;
    }
    if (this.token) {
      this.isAdmin();
      if (this.admin) {
        return true;
      }
      this.redirectAndLogin();
    }
    this.redirectAndLogin();
  }

  private redirectAndLogin() {
    this.msgService.loginWindowShow();
    this.Router.navigate(['/main']);
    return false;
  }

  private isAdmin() { 
    this.httpAuthService.isAdmin(this.token).subscribe(r => {
      this.admin = r === 'true';
    });
  }

在服务的情况下，它发送到守卫“真”或“假”，是字符串类型，但它工作得很好。 但管理属性仍然为假，isAdmin 方法不会将此属性更改为“真”。并且一直守卫将我重定向到登录表单。 为什么会这样？

Answer 1

问题是您试图在 isAdmin() 函数中分配 this.admin 值，但您不知道它何时被预先分配给 admin 属性，因为它的异步代码。

解决方案很简单，只需使用订阅来执行映射，将值转换为布尔值，然后使用制表符进行重定向。

像这样：

private isAdmin() { 
  return this.httpAuthService.isAdmin(this.token).pipe(map(r => r === 'true'));
}

可以激活功能：

canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): 
  Observable<boolean | UrlTree> | boolean | UrlTree {
  if (localStorage.length > 0) {
    const data = JSON.parse(localStorage.getItem('tokenData'));
    this.token = data.api_token;
  }
  this.isAdmin()
    .pipe(tab(r => {
       if(!r) {
         this.redirectAndLogin();
       }
    });
}

Answer 2

谢谢，你说的很对。让我回到您的解决方案，它不起作用，我做错了什么？

  canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<boolean | UrlTree> | boolean | UrlTree {
    if (localStorage.length > 0) {
      const data = JSON.parse(localStorage.getItem('tokenData'));
      this.token = data.api_token;
    }
    if (this.token) {
      this.isAdmin()
        .pipe(tap(r => {
          console.log(r); 
// In this line console.log shows me nothing, as i see, "pipe" doesnt work properly, why it happens?
          if (!r) {
            this.redirectAndLogin();
          }
        }));
      return true;
    }
    this.redirectAndLogin();
  }

private isAdmin(): Observable<boolean> {
    return this.httpAuthService.isAdmin(this.token).pipe(map(r => r === 'true'));
  }

我又在服务中回复了我的方法，也许麻烦从这里开始：

isAdmin(apiToken: string): Observable<string> {
    const params = new FormData();
    params.append('api_token', apiToken);
    return this.http.post(this.urlConfig.IS_ADMIN, params)
      .pipe(map(resp => ResultResponse.fromJson(resp)))
      .pipe(map(ResResp => ResResp.response));
  }

Answer 3

非常感谢所有答案。我简化了我的守卫，它起作用了。答案如下：

canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<boolean | UrlTree> | boolean | UrlTree {
    if (localStorage.length > 0) {
      const data = JSON.parse(localStorage.getItem('tokenData'));
      this.token = data.api_token;
    }
    if (this.token) {
      this.httpAuthService.isAdmin(this.token).subscribe(r => {
        if (!r) { this.redirectAndLogin(); }
      });
      return true;
    }
    this.redirectAndLogin();
  }

  private redirectAndLogin() {
    this.msgService.loginWindowShow();
    this.Router.navigate(['/main']);
    return false;
  }