在NextJS中捕获服务端400错误并自动删除令牌Cookie的方案

• 封装请求工具统一拦截错误
  不管用原生fetch还是第三方请求库，都可以封装全局请求逻辑，在响应阶段捕获服务端返回的400错误。当检测到错误信息为Error: Refresh token not found时，直接清除客户端存储的令牌并跳转登录页。

  示例（fetch封装）：

  async function fetchWithAuth(url, options = {}) {
    const refreshToken = localStorage.getItem('refreshToken');
    const headers = {
      ...options.headers,
      'Authorization': `Bearer ${refreshToken}`
    };
    try {
      const response = await fetch(url, { ...options, headers, method: 'POST' });
      if (!response.ok) {
        const errorData = await response.json();
        if (response.status === 400 && errorData.message === 'Error: Refresh token not found') {
          // 清除令牌存储
          localStorage.removeItem('refreshToken');
          localStorage.removeItem('accessToken');
          // 跳转登录页，适配不同路由体系
          window.location.href = '/login';
        }
        throw new Error(errorData.message || '请求失败');
      }
      return response.json();
    } catch (err) {
      console.error(err);
      throw err;
    }
  }
  
  // 调用刷新接口
  async function refreshToken() {
    try {
      const data = await fetchWithAuth('/auth/refresh');
      // 存储新令牌
      localStorage.setItem('accessToken', data.accessToken);
      localStorage.setItem('refreshToken', data.refreshToken);
    } catch (err) {
      // 错误已在封装函数中处理
    }
  }
  

• 结合状态管理同步用户状态
  如果用React Context、Redux或Zustand等工具管理用户状态，清除令牌后要同步更新状态，避免UI显示异常。比如在AuthContext中封装logout方法：

  // authContext.js
  import { createContext, useContext, useState } from 'react';
  
  const AuthContext = createContext();
  
  export function AuthProvider({ children }) {
    const [user, setUser] = useState(null);
  
    const logout = () => {
      localStorage.removeItem('refreshToken');
      localStorage.removeItem('accessToken');
      setUser(null);
      window.location.href = '/login';
    };
  
    return (
      <AuthContext.Provider value={{ user, logout }}>
        {children}
      </AuthContext.Provider>
    );
  }
  
  export function useAuth() {
    return useContext(AuthContext);
  }
  

  之后在错误处理中直接调用logout即可：

  const { logout } = useAuth();
  logout();
  

• React Query错误回调处理
  若用React Query管理请求，可在useMutation的onError回调中处理令牌清除逻辑：

  import { useMutation } from '@tanstack/react-query';
  import { useAuth } from './authContext';
  
  function useRefreshToken() {
    const { logout } = useAuth();
    return useMutation({
      mutationFn: () => fetch('/auth/refresh', { method: 'POST' }).then(res => res.json()),
      onError: (err) => {
        if (err.response?.status === 400 && err.response?.data.message === 'Error: Refresh token not found') {
          logout();
        }
      },
      onSuccess: (data) => {
        localStorage.setItem('accessToken', data.accessToken);
        localStorage.setItem('refreshToken', data.refreshToken);
      }
    });
  }
  

• 路由跳转注意事项

  • Pages Router：客户端组件可用next/router的push方法，或直接用window.location.href；
  • App Router：客户端组件需用next/navigation的useRouter钩子调用router.push('/login')。

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