使用 Angular8 中的 API 验证令牌 canActivate AuthGuard 方法

Question

我想对某些路由的每个刷新请求进行一些验证。所以我使用 Angular AuthGuard。问题出在canActivate 方法中，我想使用在线 API 进行验证。

API 是 /token/verify，它只是获取 token 变量 (jwt) 并验证它是真还是假。 然后，如果验证未完成，将路由到 /login 页面，否则执行其余操作。

代码如下：

canActivate(next: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<boolean> | boolean {
let token = this.auth.getToken();
let url = '/token/verify/';
if (!token) {
  this.router.navigate(['/login']);
  return false;
}
this.auth.verifyToken().then(res => {
  return true;
}).catch(err => {
  this.router.navigate(['/login']);
  return false;
})

而verifyToken方法是这样的：

verifyToken(): Promise<boolean> {
    let token = this.getToken();
    return !token ?
        new Promise<boolean>(resolve => {
            resolve(false);
            return false;
        }) :
        this.http.post(this.url + '/token/verify/', { 'token': token })
            .toPromise()
            .then((res) => {
                localStorage.data = JSON.stringify(res);//(res.json());
                return true;
            }
            ).catch((error) => {
                return false
            });
}

问题是promise调用不起作用，会通过。我的意思是从本地存储检查它的第一部分工作正常。但是下一部分用在线 API 检查它是行不通的。并且authGuard 不会等待其响应来进行路由。

我想它应该是某种async/await 的方式。但是我做了一些测试，但都没有奏效。如果有人可以帮助我，我会很高兴。

Answer 1

如果您改用Observables，我认为您将能够简化整个实现。

如果您确实考虑了该提议，那么您的 verifyToken 方法可以重构为：

import { of, Observable } from 'rxjs';

verifyToken(): Observable<boolean> {
  const token = this.getToken();
  return token ? this.http
    .post(this.url + '/token/verify/', {
      'token': token
    })
    .pipe(
      tap(res => localStorage.data = JSON.stringify(res)),
      map(
        res => true,
        error => false
      )
    ) : of(false)
}

然后在你的 Guard 中，你只需这样做：

canActivate(
  next: ActivatedRouteSnapshot,
  state: RouterStateSnapshot
): Observable < boolean > | Promise < boolean > | boolean {
  const token = this.auth.getToken();
  const url = "/token/verify/";

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

  return this.auth.verifyToken().pipe(
    catchError(err => {
      console.log('Handling error locally and rethrowing it...', err);
      this.router.navigate(['/login']);
      return of(false);
    })
  );

}

---

这里有一个Working Demo 供您参考。