Угловой метод 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');
  }
}

guard:

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 в качестве возвращаемого значения.Охранник будет ждать, пока наблюдаемое не решит проблему и не увидит значение.Если «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

Попробуйте реализовать свой маршрутный охранник, возвращая наблюдаемое:

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);
      }
    });
  }
}

Кроме того, не забудьте внедрить ваш перехватчик в качестве поставщика в вашем приложении. Модуль:

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

Ина маршруте, который вы хотите охранять:

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

Answer 2

Вы не возвращаете свою наблюдаемую:

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

->

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