JavaScript 中怎么使用 Fetch API 处理 401 未授权的重定向-js教程-PHP中文网

Fetch API 不会自动处理 401 状态码重定向，401 是服务端返回的合法响应，需前端手动判断并跳转登录页或刷新凭证；应检查 response.status === 401，在 then 中处理而非 catch；推荐封装 authFetch 统一拦截 401 并清除 token、跳转登录；跨域时需显式设置 credentials: 'include' 以发送认证凭证。

javascript 中怎么使用 fetch api 处理 401 未授权的重定向

Fetch API 本身不会自动处理 401 状态码的重定向——它根本不会重定向，401 就是响应，需要你手动判断并跳转登录页或刷新凭证。

理解 401 和重定向的关系

401（Unauthorized）表示请求缺少有效认证凭证，不是“需要跳转”，而是“当前请求被拒绝”。所谓“401 重定向”，其实是前端在收到 401 后，主动跳转到登录页（如 /login），而不是服务端返回 302。服务端对未认证请求返回 401 是标准做法，不应自动重定向（否则会掩盖认证失败原因，且不利于 API 调用方控制流程）。

在 fetch 中捕获并响应 401

你需要检查 response.status，并在为 401 时执行跳转或重新认证逻辑：

用 response.ok 或显式判断 response.status === 401
避免在 catch 中处理 401——网络错误才进 catch，401 是合法 HTTP 响应，会进 then
跳转前可清除本地 token，防止下次请求继续携带无效凭证

示例：

fetch('/api/profile', {
  headers: { 'Authorization': `Bearer ${localStorage.getItem('token')}` }
})
.then(res => {
  if (res.status === 401) {
    localStorage.removeItem('token');
    window.location.href = '/login?redirect=' + encodeURIComponent(window.location.pathname);
    return;
  }
  if (!res.ok) throw new Error(`HTTP error! status: ${res.status}`);
  return res.json();
})
.then(data => console.log(data))
.catch(err => console.error('Fetch failed:', err));

统一处理所有请求的 401（推荐封装）

把认证逻辑抽离成自定义 fetch 函数，便于复用和维护：

Java调试

通过 JDWP 实现 Java 远程调试：连接远程 JVM、设置断点、单步执行代码、查看变量值、获取调用栈。适用于需要调试远程 Java 应用、排查运行时状态、追踪代码执行流程的场景。术语注解 JDWP：Java Debug Wire Protocol，Java 调试有线协议（Java 远程调试底层通信协议） remote JVM：远程 Java 虚拟机 step through code：代码单步调试（步入 / 步过 / 步出调试） inspect variables：变量查看 / 变量检视 stac

下载

拦截每个响应，统一判断 401
支持 Promise 链式调用，不破坏原有使用习惯
可集成 token 自动刷新（如用 refresh token 换新 access token 后重发原请求）

简易封装示例：

async function authFetch(input, init = {}) {
  const token = localStorage.getItem('token');
  if (token) {
    init.headers = {
      ...init.headers,
      'Authorization': `Bearer ${token}`
    };
  }

  const res = await fetch(input, init);

  if (res.status === 401) {
    localStorage.removeItem('token');
    window.location.replace('/login?redirect=' + encodeURIComponent(window.location.pathname));
    throw new Error('Unauthorized: redirected to login');
  }

  return res;
}

// 使用方式不变
authFetch('/api/dashboard')
  .then(r => r.json())
  .then(console.log);