React-Redux项目中JWT令牌过期检测及触发登录模态框的最优方案

核心逻辑 #

采用响应式拦截兜底 + 预过期软检测的组合方案，完全避免你提到的两个方案的缺陷，同时兼顾准确性和性能。

具体实现步骤 #

• 第一步：全局请求响应拦截器做兜底校验
  这是最准确的校验方式，完全以服务端的判定为准，不会出现前后端时间不同步的问题，也没有额外的服务端请求开销。你可以直接在项目封装的Axios实例中添加拦截逻辑，捕获服务端返回的401未认证状态码时触发登录模态框展示，注意加防抖避免多个并发请求同时返回401时重复弹框：

// src/utils/request.js
import axios from 'axios'
import store from '../redux/store'
import { showLoginModal, clearAuthInfo } from '../redux/actions/authActions'

// 防抖标记，避免重复触发登录框
let isLoginModalOpen = false

axios.interceptors.response.use(
  (res) => res,
  (err) => {
    if (err.response?.status === 401 && !isLoginModalOpen) {
      isLoginModalOpen = true
      // 清空本地过期的认证信息
      store.dispatch(clearAuthInfo())
      store.dispatch(showLoginModal())
      // 登录模态框关闭时重置标记，可在模态框的onClose回调中调用该方法
      window.resetLoginModalFlag = () => {
        isLoginModalOpen = false
      }
    }
    return Promise.reject(err)
  }
)

如果你使用Laravel作为后端，默认的jwt-auth扩展包在令牌过期时会直接返回401状态码，无需额外调整后端接口逻辑。

• 第二步：补充预过期软检测优化用户体验
  为了避免用户在提交表单等操作中途才触发登录提示，你可以增加低精度的预检测逻辑，以本地存储的令牌过期时间为基准，提前1-2分钟检测令牌是否即将过期，该逻辑只做体验优化，就算本地时间和服务端不同步也不会影响功能，兜底仍然靠响应拦截器：

// 可在路由跳转、用户触发操作前调用该方法
export const checkTokenWillExpire = () => {
  const expireTimestamp = Number(localStorage.getItem('token_expire_at'))
  if (!expireTimestamp) return false
  // 提前2分钟触发提示，误差范围由拦截器兜底
  const isNearExpire = Date.now() > (expireTimestamp - 2 * 60 * 1000)
  if (isNearExpire && !isLoginModalOpen) {
    store.dispatch(showLoginModal())
  }
  return isNearExpire
}

• 第三步：Redux状态管理全局挂载登录模态框
  将登录模态框的显示状态存储在Redux的全局state中，在App根组件中直接引入登录模态框组件，根据Redux的状态控制显示，不需要在每个业务页面单独声明模态框。

可选优化：无感刷新令牌 #

如果你的服务端支持refresh token机制，可以在捕获401时先尝试用refresh token请求新的access token，请求成功后自动重发之前失败的业务请求，用户完全无感知，只有refresh token也过期时才弹出登录模态框，进一步提升使用体验。

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