在Next.js中如何在axios拦截器中实现页面重定向？

核心思路 #

SSR 场景下 axios 拦截器无法直接访问 Next.js 的服务端请求上下文，不能直接修改服务端响应实现重定向。因此调整逻辑：拦截器只负责抛出带重定向标识的错误，把重定向操作放到能接触到 Next.js 原生能力的上层（getServerSideProps、服务端组件等）执行。

具体实现步骤 #

步骤1：修改响应错误处理器 #

不要在拦截器内尝试服务端重定向，改为给错误对象挂载重定向相关标识：

// responseErrorHandler.ts
const responseErrorHandler = (error: AxiosError): Promise<AxiosError> => {
  if (error.response) {
    if (error.message === TIMEOUT_MESSAGE) {
      if (typeof window === 'undefined') {
        // 给错误对象挂载重定向标识，供上层逻辑识别
        (error as any).shouldRedirect = true
        (error as any).redirectUrl = '/503'
      } else {
        // 客户端逻辑保持不变，直接跳转
        window.location.href = '/503';
      }
    }
  }

  return Promise.reject(error);
}

步骤2：在上层请求位置处理重定向 #

Pages Router 场景

在 getServerSideProps 中捕获请求错误，识别到重定向标识后返回 Next.js 要求的重定向结构即可：

// pages/对应页面.tsx
export const getServerSideProps = async () => {
  try {
    const res = await customAxios.get('你的请求接口地址')
    return { 
      props: { 
        data: res.data 
      } 
    }
  } catch (err: any) {
    // 识别拦截器抛出的重定向信号
    if (err.shouldRedirect) {
      return {
        redirect: {
          destination: err.redirectUrl,
          permanent: false
        }
      }
    }
    // 其他错误的处理逻辑
    return { notFound: true }
  }
}

App Router 场景

在服务端组件/Server Action 中捕获错误，调用 Next.js 提供的 redirect 方法即可：

// app/对应路由/page.tsx
import { redirect } from 'next/navigation'

// 服务端请求逻辑
async function fetchPageData() {
  try {
    const res = await customAxios.get('你的请求接口地址')
    return res.data
  } catch (err: any) {
    if (err.shouldRedirect) {
      // 直接调用Next.js原生重定向方法
      redirect(err.redirectUrl)
    }
    throw err
  }
}

export default async function Page() {
  const data = await fetchPageData()
  return <div>{/* 页面渲染逻辑 */}</div>
}

进阶优化：封装通用请求函数 #

如果项目内请求较多，不想每个请求都重复写捕获逻辑，可以封装通用的请求包装函数：

// customAxios.ts
export const request = async <T = any>(config: AxiosRequestConfig): Promise<T> => {
  try {
    const res = await customAxios.request<T>(config)
    return res.data
  } catch (err: any) {
    // 服务端场景下直接抛出带标识的错误，上层统一处理
    if (typeof window === 'undefined' && err.shouldRedirect) {
      throw err
    }
    return Promise.reject(err)
  }
}

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