代码之家 › 专栏 › 技术社区 › Reza Torkaman Ahmadi

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

auth-guard es6-promise async-await angular javascript

0

Reza Torkaman Ahmadi · 技术社区 · 6 年前

我想对某些路由的每个刷新请求进行一些验证。所以我用角度 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 authGuard 不等待其响应来执行路由。

async/await 态度。但我做了一些测试,没有一个成功。如果有人能帮我,我会很高兴的。

1 回复 | 直到 6 年前

1

SiddAjmera 6 年前

我认为如果使用 Observable 取而代之的是s。

如果你真的考虑了那个建议,那么 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)
}

然后,在你的守卫下,你只需要这样做:

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