React+Axios场景下如何保存当前页面路径，以便重新认证后跳转

方案：通过axios请求拦截器自动注入当前页面地址 #

这个方案无需修改现有业务侧的axios调用逻辑，所有请求会自动携带发起时的页面地址，核心原理是浏览器环境下window.location是全局可访问的，不需要从组件内部传递。

第一步：配置请求拦截器注入地址 #

在你封装axios实例的文件中添加请求拦截器，统一为所有请求的自定义配置项注入当前页面地址：

import axios from 'axios';

// 你自己的axios实例
const axiosInstance = axios.create({
  baseURL: '/你的接口前缀',
  // 其他原有基础配置
});

// 请求拦截器：请求发出前自动注入当前页面地址
axiosInstance.interceptors.request.use(
  (config) => {
    // 兼容SSR场景避免window不存在报错，纯客户端项目可去掉判断
    if (typeof window !== 'undefined') {
      // 把地址存到请求配置的自定义字段里，避免和官方配置冲突
      config._requestPage = window.location.href;
    }
    return config;
  },
  (error) => Promise.reject(error)
);

第二步：token过期时存储跳转地址 #

在你处理refresh token过期的逻辑（axios响应拦截器的401分支、或者axios-auth-refresh的刷新回调）中，拿到请求携带的页面地址存储到本地缓存，再跳转登录页：

// 响应拦截器示例
axiosInstance.interceptors.response.use(
  (response) => response,
  (error) => {
    // 判断为refresh token过期的情况
    if (error.response?.status === 401 && isRefreshTokenExpired(error)) {
      // 从请求配置中拿到之前存入的页面地址
      const targetPage = error.config._requestPage;
      // 存到sessionStorage，会话关闭自动清除更安全
      sessionStorage.setItem('afterLoginRedirect', targetPage);
      // 跳转到登录页
      window.location.replace('/login');
      return Promise.reject(error);
    }
    // 其他错误处理逻辑
    return Promise.reject(error);
  }
);

第三步：登录成功后跳转回原页面 #

在登录组件的登录成功逻辑中，读取缓存的跳转地址进行跳转，没有缓存的话默认跳首页即可：

// 登录成功后的处理逻辑
const onLoginSuccess = () => {
  const redirectUrl = sessionStorage.getItem('afterLoginRedirect');
  // 读取后立即删除，避免下次登录错误跳转
  sessionStorage.removeItem('afterLoginRedirect');
  // 跳转，优先用缓存的原页面地址
  window.location.href = redirectUrl || '/home';
};

注意事项 #

• 如果你的项目没有服务端渲染场景，可以直接省略判断window是否存在的逻辑
• 存储跳转地址优先用sessionStorage而非localStorage，避免用户长时间未登录后打开页面跳转到过时的地址

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