角衛隊canActivate方法不適用於Observable <boolean>

Question

我正在嘗試在訪問路由之前在后端驗證令牌

這是我的身份驗證服務：

export class AuthService {

  private registerUrl = 'http://127.0.0.1:3000/register';
  private loginUrl = 'http://127.0.0.1:3000/signin';
  private verifyTokenUrl = 'http://127.0.0.1:3000/v';

  constructor(private http: HttpClient) { }


  isLoggedIn() {
    if (!localStorage.getItem('token')) {
      console.log('false in isloggedin method');
      return false;
    }
    console.log('logged in, not verified yet');
    return true;
  }

  isTokenValid(token): Observable<boolean> {
    console.log('verifing');
    return this.http.post<any>(this.verifyTokenUrl, {token});
  }

  getToken() {
    return localStorage.getItem('token');
  }
}

守護：

export class AuthGuard implements CanActivate {
  constructor(private authService: AuthService,
              private router: Router) {}

  canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<boolean> {
    if (this.authService.isLoggedIn()) {
      const token = localStorage.getItem('token');
      this.authService.isTokenValid(token)
      .pipe(
        map(e => {
          if (e) {
            return true;
          } else {
            this.router.navigate(['/login']);
            return false;
          }
        }),
        catchError((err) => {
          this.router.navigate(['/login']);
          return of(false);
        })
      );
    } else {
      this.router.navigate(['/login']);
      return of(false);
    }
  }
}

似乎可觀察對象不會“像使用訂閱方法時一樣”激活，並且API中的代碼甚至都沒有運行。 canActivate（）假設接受一個Observable作為返回值。 守衛將等待Observable解析並查看該值。 如果為“ true”，它將通過檢查，否則（任何其他數據或拋出錯誤）將拒絕該路由。 指這個答案

就我而言，該應用程序停留在當前頁面，不會路由到目標，也不會發布到服務器。 還有一個類似的問題在這里 ，他們通過添加解決它.take(1)但在我的情況下，它給出了一個錯誤Property 'take' does not exist on type 'OperatorFunction<{}, boolean>'

這是我的驗證API以防萬一

//.........token verify
app.post('/v', (req, res) => {
    const {token} = req.body
    const payload = jwt.verify(token, 'secretKey' )
    console.log(payload);
    if (!payload) {
        return res.status(401).send(false)
    }
    res.status(200).send(true)
})

Answer 1

您沒有返回可觀察到的結果：

this.authService.isTokenValid(token)
  //...

- >

return this.authService.isTokenValid(token)
  //... 

Answer 2

嘗試實現您的路線后衛返回一個可觀察到的：

export class AuthGuard implements CanActivate {
  constructor(private authService: AuthService,
    private router: Router) { }

  canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<boolean> {
    return Observable.create(observer => {
      if (this.authService.isLoggedIn()) {
        const token = localStorage.getItem('token');
        this.authService.isTokenValid(token)
          .pipe(
            map(e => {
              if (e) {
                observer.next(true);
              } else {
                this.router.navigate(['/login']);
                observer.next(false);
              }
            }),
            catchError((err) => {
              this.router.navigate(['/login']);
              observer.next(false);
            })
          );
      } else {
        this.router.navigate(['/login']);
        observer.next(false);
      }
    });
  }
}

此外，不要忘記將攔截器實現為app.module中的提供者：

// your.module.ts
// ...
providers: [
  ...,
  AuthGuard
];

在您要守護的路線上：

// some route to guard
{ path: 'guarded-route', component: GuardedRouteComponent, canActivate: [AuthGuard] }