如何在Next.js 15中通过重定向处理401未授权错误？

问题描述 #

我正在使用Next.js 15，基于fetch API实现了一个服务端的fetcher API管理器。希望在收到状态码为401的响应时，将用户重定向至登录页面。

相关代码 #

HomePage.tsx（服务端组件）

try {
  const response = fetcher<UserRolesResponse>(`/tests`, {
    method: 'GET',
    headers: {
      Accept: 'application/json', 
      'Content-Type': 'application/json',
    },
  })
} catch (error) {
  // handle other error
}

Fetcher.tsx（服务端函数）

'use server'

export const fetcher = async <T>(
  url: string
): Promise<T> => {
  const token = await getAccessToken();

  const headers = {
    ...init?.headers,
    Authorization: `Bearer ${token}`,
  };

  const response = await fetch(url, {
    ...init,
    next: { revalidate: 0, ...init?.next },
    headers,
  });

  if (response.ok) {
    const data = await response.json();
    return data
  } else {
    if (response.status === 401 ) {
       //// <<-------- redirect here
    } else {
       const errorResponse: ErrorResponse = await response.json();
       return Promise.reject(errorResponse);
    }
  }
};

实现思路 #

由于你的fetcher标记了'use server'，属于服务端函数，在Next.js 15中可以直接使用next/navigation提供的redirect函数处理重定向，具体步骤如下：

1. 导入redirect函数：在Fetcher.tsx中引入Next.js官方的重定向工具
2. 处理401状态：检测到响应状态码为401时，调用redirect跳转到登录页面，可同时清除无效的token（如果有对应逻辑）
3. 注意：服务端重定向会直接终止当前请求流程，无需返回Promise，调用redirect即可完成跳转

修改后的Fetcher.tsx代码 #

'use server'

import { redirect } from 'next/navigation'; // 导入服务端重定向函数

export const fetcher = async <T>(
  url: string,
  init?: RequestInit // 补充原代码中缺失的init参数声明
): Promise<T> => {
  const token = await getAccessToken();

  const headers = {
    ...init?.headers,
    Authorization: `Bearer ${token}`,
  };

  const response = await fetch(url, {
    ...init,
    next: { revalidate: 0, ...init?.next },
    headers,
  });

  if (response.ok) {
    const data = await response.json();
    return data;
  } else {
    if (response.status === 401) {
      // 可选：清除无效的token（如果是服务端session存储，这里同步清理对应数据）
      // await clearAccessToken();
      
      // 重定向到登录页，携带当前页面地址作为回调参数，方便登录后返回原页面
      redirect(`/login?redirect=${encodeURIComponent(url)}`);
    } else {
      const errorResponse: ErrorResponse = await response.json();
      return Promise.reject(errorResponse);
    }
  }
};

补充说明 #

• 服务端组件调用服务端函数时，redirect会直接触发服务端重定向，浏览器地址栏会同步更新到登录页面
• 携带redirect参数后，登录页面可以读取该参数，在用户登录成功后自动跳转回原请求页面
• 如果你的getAccessToken是从服务端session获取，401时建议同步清理对应session数据，避免后续请求重复携带无效token

内容的提问来源于stack exchange，提问作者Nawin Poolsawad