Question

As far as I understand我真的不应该在Angular中使用async / await方法。

所以我试图弄清楚如何不使用这些方法。

我正在使用canActivate函数，该函数首先调用AuthService，该函数询问PHP当前的JWT令牌是否有效。但是，目前，我只能这样做：

可以激活

async canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot)
  {
    var valid_token: boolean;
    var role: number;

    await this.auth.validate_token()
    .then(res => 
    {
      valid_token = res['valid_token'],
      role = res['role']
    });

    //define if current user can access
  }

validate_token

validate_token()
  {
    return this.http.post(globals.api_url("verify-token.php"), 
      {
        jwt: localStorage.getItem('token')
      }).toPromise()
      .then(result => result)
      .catch(result => result['valid_token'] = false);
  }

现在我必须在其他地方调用此validate_token()函数，并且我不想为异步/等待设置每个函数。

我一直在观察一些可观察的东西，但是仍然没有任何合适的结果。

verify-token.php返回当前令牌是否有效以及其他一些用户比例

Answer 1

您无需使用async/await，因为路由集结和解析器将在继续进行之前等待诺言或可观察到的诺言。

如果所有防护措施都返回true，则导航将继续。如果任何防护措施返回假，导航将被取消

您的可观察值只需要返回一个真或假值。

validate_token

validate_token()
  {
    return this.http.post(globals.api_url("verify-token.php"), 
      {
        jwt: localStorage.getItem('token')
      })
  }

可以激活

canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot)
  {
    var valid_token: boolean;
    var role: number;

    return this.auth.validate_token()
      .pipe(
        tap((res) => {
          valid_token = res['valid_token'],
          role = res['role']
        }),
        map((res) => {
          return res['valid_token']
        }),
      )
  }

请注意，canActivate防护中的可观察对象返回res['valid_token']

Answer 2

最好使用Observable代替Promise

private authStatusListener = new Subject<boolean>();

constructor(private http: HttpClient) { }

getAuthStatusListener() {
   return this.authStatusListener.asObservable();
}

validate_token()
{
   const user = {email: email, password: password};
   this.http.post<{token: string}>(url, user) .subscribe(response => {
        const token = response.token;
        this.authStatusListener.next(true);
   }, (error: any) => {
        this.authStatusListener.next(false);
   });
 }

，您可以从另一个组件订阅Observable，每次成功登录将触发true，失败登录将触发false

 this.authService.getAuthStatusListener()
  .subscribe(isAuthenticated =>{
    this.loading = isAuthenticated;
 });

您可以看到我的简单项目，以了解更多link

将await / async函数转换为可观察对象的最简单方法

2 个答案: