React中JWT会话管理咨询：如何高效处理Token过期跳转？

嘿，这个问题戳中了很多前端开发者刚用JWT时的痛点——手动给每个请求加校验、处理过期跳转确实太繁琐了，完全没必要重复造轮子！下面给你一套简洁高效的方案，把这些逻辑统一管理起来：

1. 用请求/响应拦截器统一处理所有Token逻辑 #

这是最核心的优化点：把Token的携带、过期校验、跳转逻辑全部抽离到一个全局拦截器里，不用每个请求都单独写代码。

以常用的Axios为例，你可以创建一个封装好的API实例：

import axios from 'axios';

// 创建全局API实例
const apiClient = axios.create({
  baseURL: '/api'
});

// 请求拦截器：自动给所有请求带上Token
apiClient.interceptors.request.use(
  config => {
    const token = sessionStorage.getItem('jwtToken');
    if (token) {
      config.headers.Authorization = `Bearer ${token}`;
    }
    return config;
  },
  error => Promise.reject(error)
);

// 响应拦截器：统一处理Token过期/无效的情况
apiClient.interceptors.response.use(
  response => response,
  async error => {
    const originalRequest = error.config;
    // 只处理401（未授权）且未重试过的请求
    if (error.response.status === 401 && !originalRequest._retry) {
      originalRequest._retry = true; // 标记已重试，避免死循环
      
      // 清除无效Token并跳转登录页
      sessionStorage.removeItem('jwtToken');
      // 根据你的路由框架调整跳转方式，比如React Router用navigate，Vue用$router
      window.location.href = '/login';
      
      return Promise.reject(error);
    }
    return Promise.reject(error);
  }
);

// 之后所有API请求都用这个实例
export default apiClient;

这样所有接口请求都会自动携带Token，一旦后端返回Token无效的401状态，就会统一清除Token并跳转到登录页，完全不用在每个请求里写重复逻辑。

2. 优化体验：用双Token机制减少强制登录 #

如果不想用户频繁被踢回登录页，可以用Access Token + Refresh Token的双Token方案：

• Access Token：有效期短（比如15分钟），用于日常接口认证
• Refresh Token：有效期长（比如7天），用于在Access Token过期时自动获取新的Access Token

修改响应拦截器的逻辑，实现自动刷新：

apiClient.interceptors.response.use(
  response => response,
  async error => {
    const originalRequest = error.config;
    if (error.response.status === 401 && !originalRequest._retry) {
      originalRequest._retry = true;
      const refreshToken = sessionStorage.getItem('refreshToken');
      
      if (refreshToken) {
        try {
          // 调用后端刷新Token接口
          const res = await axios.post('/api/refresh-token', { refreshToken });
          const newAccessToken = res.data.accessToken;
          const newRefreshToken = res.data.refreshToken;
          
          // 更新存储的Token
          sessionStorage.setItem('jwtToken', newAccessToken);
          sessionStorage.setItem('refreshToken', newRefreshToken);
          
          // 给原请求带上新Token，并重发请求
          originalRequest.headers.Authorization = `Bearer ${newAccessToken}`;
          return apiClient(originalRequest);
        } catch (refreshError) {
          // 刷新Token失败，说明用户需要重新登录
          sessionStorage.removeItem('jwtToken');
          sessionStorage.removeItem('refreshToken');
          window.location.href = '/login';
          return Promise.reject(refreshError);
        }
      } else {
        // 没有Refresh Token，直接跳转登录
        sessionStorage.removeItem('jwtToken');
        window.location.href = '/login';
      }
    }
    return Promise.reject(error);
  }
);

这样用户在操作时，Access Token过期会自动静默刷新，只有当Refresh Token也过期时才需要重新登录，体验友好很多。

3. 配合全局状态管理，统一维护登录状态 #

如果用React、Vue这类框架，可以把登录状态（是否登录、Token信息）放在全局状态管理工具里（比如Pinia、Redux、Vuex），方便组件统一获取状态，还能实现状态变化时的自动更新。

举个Pinia的例子：

import { defineStore } from 'pinia';

export const useAuthStore = defineStore('auth', {
  state: () => ({
    token: sessionStorage.getItem('jwtToken') || null,
    refreshToken: sessionStorage.getItem('refreshToken') || null
  }),
  actions: {
    setToken(token, refreshToken) {
      this.token = token;
      this.refreshToken = refreshToken;
      sessionStorage.setItem('jwtToken', token);
      sessionStorage.setItem('refreshToken', refreshToken);
    },
    clearToken() {
      this.token = null;
      this.refreshToken = null;
      sessionStorage.removeItem('jwtToken');
      sessionStorage.removeItem('refreshToken');
    }
  },
  getters: {
    isLoggedIn: state => !!state.token
  }
});

之后请求拦截器可以直接从状态管理里取Token，不用直接操作sessionStorage，代码更规范。

4. 路由守卫：从路由层面拦截未登录访问 #

除了接口校验，还要在路由层面做拦截——防止用户直接输入受保护页面的URL绕过登录。

比如React Router的路由守卫组件：

import { Navigate, Outlet } from 'react-router-dom';
import { useAuthStore } from '../stores/auth';

export const ProtectedRoute = () => {
  const authStore = useAuthStore();
  // 已登录则渲染页面，否则跳转到登录页
  return authStore.isLoggedIn ? <Outlet /> : <Navigate to="/login" />;
};

在路由配置里用这个组件包裹需要登录的页面：

<Routes>
  <Route path="/login" element={<LoginPage />} />
  <Route element={<ProtectedRoute />}>
    <Route path="/dashboard" element={<Dashboard />} />
    <Route path="/news" element={<NewsList />} />
  </Route>
</Routes>

Vue则可以用全局路由守卫实现类似逻辑，形成接口+路由的双重权限保障。

核心思路总结 #

• 统一拦截：把Token的所有逻辑抽离到全局拦截器，避免重复代码
• 双Token机制：用Refresh Token自动刷新Access Token，提升用户体验
• 全局状态管理：统一维护登录状态，方便组件使用和状态同步
• 路由守卫：从路由层面拦截未登录访问，完善权限控制

这样整个JWT会话管理流程就完全自动化了，不用每个请求都手动处理过期和跳转，代码简洁易维护。

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