令牌拦截器在 Angular 8 中不起作用答案

【问题标题】：Token Interceptor not working in Angular 8令牌拦截器在 Angular 8 中不起作用
【发布时间】：2021-08-12 23:20:27
【问题描述】：

我尝试在标头中传递 JWT 令牌。我正在使用下面的代码。我已经注入了身份验证服务并导入了必要的文件。但它不起作用。

我想在每个请求的 HTTP 标头中添加 JWT？我怎样才能做到这一点？我需要后端使用授权令牌对每个请求进行身份验证。

Angular 应用模块代码：

providers: [
   AuthGuard,
   { 
       provide: HTTP_INTERCEPTORS, 
       useClass: TokenInterceptor, 
       multi: true 
   }
]

角度拦截器代码：

import { Inject, Injectable, Injector } from '@angular/core';
import { HttpEvent, HttpHandler, HttpInterceptor, HttpRequest } from '@angular/common/http';
import { Observable } from 'rxjs/Observable';
import { switchMap } from 'rxjs/operators';
import { NbAuthJWTToken, NbAuthService, NB_AUTH_TOKEN_INTERCEPTOR_FILTER ,NbAuthToken} from '@nebular/auth';

/**
 * TokenInterceptor
 * @see https://angular.io/guide/http#intercepting-all-requests-or-responses
 */

@Injectable()
export class TokenInterceptor implements HttpInterceptor {

    private tokenService: NbAuthJWTToken;

    constructor(private injector: Injector,
        @Inject(NB_AUTH_TOKEN_INTERCEPTOR_FILTER) protected filter) {
    }

    intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
        debugger;
        if (!this.filter(req)) {
          return this.authService.isAuthenticatedOrRefresh()
            .pipe(
              switchMap(authenticated => {
                if (authenticated) {
                    debugger;
                    return this.authService.getToken().pipe(
                      switchMap((token: NbAuthToken) => {
                        const JWT = `Bearer ${token.getValue()}`;
                        req = req.clone({
                          setHeaders: {
                            Authorization: JWT,
                          },
                        });
                        return next.handle(req);
                      }),
                    )
                } else {
                    // Request is sent to server without authentication so that the client code
                    // receives the 401/403 error and can act as desired ('session expired', redirect to login, aso)
                  return next.handle(req);
                }
              }),
            )
        } else {
      return next.handle(req);
    }
  }

  protected get authService(): NbAuthService {
    return this.injector.get(NbAuthService);
  }

}

我做错了什么？

【问题讨论】：

什么不起作用？你得到你的错误了吗？发生了什么，预期的行为是什么？
我没有收到任何错误。我想为每个请求添加一个 JWT 到 HTTP 标头？我怎样才能做到这一点？我需要后端使用授权令牌对每个请求进行身份验证。
标头中没有传递令牌。但是当我在任何组件中控制令牌时它正在打印。
你试过调试它吗？我猜有些条件不适合你。
一个好主意是添加“authService”的内容

标签： angular

【解决方案1】：

您需要调试代码以检查未添加令牌的原因。但是你可以简化逻辑：

  intercept(req, next) {
    const tokenizedReq = req.clone({
      setHeaders: {
        Accept: 'application/json',
        'Content-Type': 'application/json',
        Authorization: `Bearer ${localStorage.getItem('token')}`
      }
    });

    return next.handle(tokenizedReq);
  }

这样您就可以尝试为每个请求添加令牌。如果令牌丢失，用户将收到 401 请求。当用户进行身份验证时，只需将令牌添加到本地存储。

【讨论】：

【解决方案2】：

尝试这样做：

req = req.clone({ headers: req.headers.set('Authorization', JWT) });

还要确保单步执行代码并查看此时会发生什么。确保您在首次生成令牌时存储它，并从存储中检索它以供后续调用（我相信您已经这样做了，但以防万一）。

【讨论】：

【解决方案3】：

你可能忘记在 app 模块的 providers 数组中添加拦截器了

  providers: [
{provide: HTTP_INTERCEPTORS, useClass: JwtInterceptor, multi: true}]

【讨论】：