令牌阻断器不工作在角8

Question

我尝试在头中传递JWT令牌。我正在使用下面的代码。我已经输入了必要的文件。但这不管用。

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

角应用程序模块代码：

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

}

我做错什么了？

Answer 1

您可能忘了在app模块中的提供者数组中添加拦截器。

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

Answer 2

您需要调试代码，以检查为什么不添加令牌。但是，您可以简化逻辑：

  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。当用户进行身份验证时，只需将令牌添加到本地存储。

Answer 3

尝试这样做：

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

还要确保逐步完成代码，并查看在这一点上发生了什么。确保您在第一次生成令牌时存储它，并从存储中检索它以供后续调用(我相信您已经在这样做了，但以防万一您没有这样做)。