Next.js中API返回401时如何从_app.tsx重定向至登录页

要在API返回401状态时完成删除Cookie+重定向到登录页的逻辑，你可以借助Next.js的客户端路由工具实现，具体步骤如下：

1. 导入路由工具（Pages Router） #

在_app.tsx中导入Next.js的Router对象：

import Router from 'next/router';

2. 修改axios拦截器逻辑 #

在拦截器的401处理分支中，删除Cookie后添加重定向判断，避免重复跳转：

import { deleteCookie } from "cookies-next";
import Router from 'next/router';
import axios from 'axios'; // 确保已导入axios

export const logout = () => deleteCookie("token", { secure: true });

axios.interceptors.response.use(
  (res) => res,
  async (err) => {
    const status = err.response?.status;
    if (status === 401) {
      logout();
      // 仅在客户端环境且当前不在登录页时执行重定向
      if (typeof window !== 'undefined' && window.location.pathname !== '/login') {
        Router.push('/login');
      }
      return Promise.reject(err);
    }
    return Promise.reject(err);
  }
);

补充说明 #

• 客户端环境判断：typeof window !== 'undefined'是为了避免服务端渲染阶段执行浏览器相关代码导致报错。
• 避免重复跳转：判断window.location.pathname !== '/login'可以防止用户已经在登录页时重复触发跳转。
• 路由方式选择：Router.push('/login')是Next.js推荐的客户端导航方式，实现无刷新跳转；如果不需要无刷新效果，也可以替换为window.location.href = '/login'。

你的middleware.ts已经处理了无Token时的页面访问拦截，两者配合可以覆盖两种场景：

1. 用户直接访问受保护页面时，middleware拦截并跳转至登录页
2. 用户在受保护页面发起API请求返回401时，客户端拦截器即时触发跳转

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