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

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

  •  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
  •  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