实现拦截器

Question

我有拦截器的问题，现在我正在学习 JWT 到达处理拦截器的步骤，我无法知道问题的根源，拦截器正在阻止要使用的登录 API 并生成令牌将被注入到拦截器的请求头中；这里是拦截器类的代码：

import { catchError } from 'rxjs/operators';
import { HttpInterceptor, HttpRequest, HttpHandler, HttpEvent, HttpErrorResponse } from "@angular/common/http";
import { Injectable } from '@angular/core';
import { tap } from 'rxjs/operators';
import { Router } from "@angular/router";
import { Observable, throwError } from 'rxjs';

@Injectable()
export class AuthInterceptor implements HttpInterceptor {

constructor(){}

intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>>{
      console.log("you are in interceptor");
      // get the token from the local storage
      const token = localStorage.getItem('token');
      if(token){
        console.log("token stored to the local store: "+token);
        // modify the request header
        req = req.clone({
          setHeaders: {Authorization: `${token}`}
        });
        // handling errors
        return next.handle(req).pipe(catchError(err=>{
          console.log("something wrong in interceptor");
          if(err instanceof HttpErrorResponse){
             console.log(err.status + ': token expired, login again');
          }
          return throwError(()=> new Error('Some Unknown Error'));
        }));
      }
      else console.log("token not provided");
}
}

如果你想要使用 Node.js 和角度的完整代码，这里是角度上的链接： https://github.com/process20/JWT-Implementation.

我尝试实现拦截器来理解 JWT 令牌，但代码没有按预期执行，拦截器阻止了登录 API。

Answer 1

您的

else

区块需要使用

return next.handle(request);

传递请求。所以它应该看起来更像这样：

import { catchError } from "rxjs/operators";
import {
  HttpInterceptor,
  HttpRequest,
  HttpHandler,
  HttpEvent,
  HttpErrorResponse,
} from "@angular/common/http";
import { Injectable } from "@angular/core";
import { tap } from "rxjs/operators";
import { Router } from "@angular/router";
import { Observable, throwError } from "rxjs";

@Injectable()
export class AuthInterceptor implements HttpInterceptor {
  constructor() {}

  intercept(
    req: HttpRequest<any>,
    next: HttpHandler
  ): Observable<HttpEvent<any>> {
    console.log("you are in interceptor");
    // get the token from the local storage
    const token = localStorage.getItem("token");
    if (token) {
      console.log("token stored to the local store: " + token);
      // modify the request header
      req = req.clone({
        setHeaders: { Authorization: `${token}` },
      });
      // handling errors
      return next.handle(req).pipe(
        catchError((err) => {
          console.log("something wrong in interceptor");
          if (err instanceof HttpErrorResponse) {
            console.log(err.status + ": token expired, login again");
          }
          return throwError(() => new Error("Some Unknown Error"));
        })
      );
    } else {
      console.log("token not provided");
      return next.handle(request);
    }
  }
}