时间戳

首页 > 解决方案 > CanActivate 返回 true，但组件中仍然出现 401 Unauthorize 错误

angular - CanActivate 返回 true，但组件中仍然出现 401 Unauthorize 错误

问题描述

我确实 CanActivate 返回了 true 但在我调用数据库时在我的组件中仍然出现 401 错误。

@Injectable()
export class AuthGuard implements CanActivate {
  constructor(private route: ActivateRouteSnapshot, private tokenService: TokenService) {}

  public canActivate = (
    route: ActivatedRouteSnapshot,
    state: RouterStateSnapshot
  ): Observable<boolean>|Promise<boolean>|boolean => {
    const token = this.tokenService.token; // get jwt token 
    if (!token || this.isTokenExpired(token)) {
        this.route.navigateByUrl('/login');
        return false;
    }   
    return true;
  }
}

isTokenExpired 方法：

private isTokenExpired = (token: any): boolean => {
   return Number(token.issued_at) + Number(token.expires_in) >= new Date().getTime();
}

我设置了一个断点，发现它返回了 true。但是在我的组件中，我点击了数据库，但出现了 401 错误。

我的组件

async ngOnInit() {
    await this.myService.getInformation('url').then(() => this.loading()).catch(this.showing = false;));}

另一个类中的getInformation方法。

public getInformation = (url: string): Promise<void> => {
    return new Promise(resolve, reject) => {
       this.subscription.get().subscribe(response => {
            this.data = response;
            resolve();
       },
          error => {
              console.log(error); // 401 error here
              reject();
          });
    });
}

标签： angularjwtangular5

解决方案

从您发布的内容来看，您缺少将身份验证令牌注入 Http 请求的 HttpInterceptor。

一个很好的例子：

@Injectable()
export class TokenInterceptor implements HttpInterceptor {
    constructor(public auth: AuthService) {}
    intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {

request = request.clone({
  setHeaders: {
    Authorization: `Bearer ${this.auth.getToken()}`
  }
  });
   return next.handle(request);
 }
}

这将通过应用程序连接 Http 注入，以将令牌插入到请求标头中。一旦它也至少被添加到 Angular 的 DI 提供程序中。

然后使用它会自动像这样工作：

// service method
return this.http.get('myApi/mymethod');

推荐阅读