Angular拦截器拦截登录API问题——JWT学习阶段故障排查

你的问题出在两个核心点：无token时未传递请求，以及未对登录接口做拦截排除，以下是具体修复方案：

1. 修复请求传递逻辑 #

当前代码中，当localStorage里没有token时，拦截器没有返回next.handle(req)，导致登录请求被直接阻断，无法发送到后端生成token。必须在无token的分支里补充请求传递的逻辑，确保请求能继续流转。

2. 排除登录接口的拦截处理 #

登录接口本身不需要携带token，应该让拦截器跳过对它的处理。可以通过判断请求URL是否匹配登录接口路径来实现。

修改后的拦截器代码 #

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

@Injectable()
export class AuthInterceptor implements HttpInterceptor {

  // 定义登录接口路径，根据你的实际后端接口调整
  private loginApiPath = '/api/auth/login';

  constructor(private router: Router) {}

  intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>>{
    console.log("you are in interceptor");
    
    // 跳过登录接口的拦截处理
    if (req.url.includes(this.loginApiPath)) {
      return next.handle(req);
    }

    // 从localStorage获取token
    const token = localStorage.getItem('token');
    if(token){
      console.log("token stored to the local store: "+token);
      // 克隆请求并添加Authorization头
      req = req.clone({
        setHeaders: {Authorization: `${token}`}
      });
      // 错误处理
      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');
           // token过期时跳转登录页（可选逻辑）
           this.router.navigate(['/login']);
        }
        return throwError(()=> new Error('Some Unknown Error'));
      }));
    }
    // 无token时，正常传递请求
    else {
      console.log("token not provided");
      return next.handle(req);
    }
  }
}

关键改动说明 #

• 新增loginApiPath变量，用于匹配你的登录接口路径，需根据实际项目调整；
• 增加URL判断逻辑，若请求是登录接口，直接跳过拦截处理；
• 在无token的分支补充return next.handle(req)，确保请求能正常发送到后端；
• 补充了Router注入和token过期时跳转登录页的可选逻辑，可根据需求调整。

内容的提问来源于stack exchange，提问作者process handler