Angular 6拦截器处理401响应调用登出接口时如何避免死循环

算力阿峰

2026-9-24

解决方案

核心逻辑是排除登出接口的401响应触发二次登出逻辑，有3种可落地的实现方式：

方案1：匹配登出接口URL直接排除

在401状态码判断逻辑中增加URL过滤条件，跳过登出接口的401处理：

// 拦截器的错误处理部分修改如下
else if (error.status === 401 && !authReq.url.includes('/api/auth/logout')) {
  // 注意把路径替换成你实际的登出接口路径
  this.toastrService.error("Unauthenticated, Logging Out!")
  this.logoutUser()
}

优势：代码改动最小，不需要修改登出接口的调用逻辑；劣势：接口路径变更需要同步修改拦截器逻辑。

方案2：给登出接口加自定义标记头

调用登出接口时附加自定义头，拦截器识别到该头就跳过401处理：

先修改拦截器的401判断逻辑：

else if (error.status === 401 && !authReq.headers.has('X-Skip-401-Handler')) {
  this.toastrService.error("Unauthenticated, Logging Out!")
  this.logoutUser()
}

再修改logoutUser方法中调用登出接口的逻辑，附加自定义头：

logoutUser() {
  this.http.post('/你的登出接口地址', {}, {
    headers: new HttpHeaders({
      'X-Skip-401-Handler': 'true'
    })
  }).subscribe(() => {
    // 原有清空用户信息、跳转登录页的逻辑
  })
}

优势：和业务路径解耦，灵活性最高；劣势：需要修改登出接口的调用代码。

方案3：增加登出状态锁

在拦截器内新增全局状态标记，触发登出后直接锁死401处理逻辑：

先在拦截器类中新增状态变量：

private isLoggingOut = false;

修改401判断逻辑：

else if (error.status === 401 && !this.isLoggingOut) {
  this.isLoggingOut = true; // 触发登出后立即锁死，避免重复调用
  this.toastrService.error("Unauthenticated, Logging Out!")
  this.logoutUser()
}