基于Token过期实现用户自动登出时Axios调用报错的问题咨询

错误根因 #

你遇到的报错和逻辑异常由以下几处代码错误导致：

• 直接在axios实例上调用了不存在的logoutUser方法：axios没有内置该方法，该方法是你定义的redux action，不能挂载到axios上调用
• checkTokenExpiration中间件存在逻辑错误：无论token是否过期都会重复执行next(action)，导致action被多次触发
• 方法调用链语法错误：axios.logoutUser().checkTokenExpiration.then()完全不符合语法规范，checkTokenExpiration是redux中间件，不属于axios请求的返回属性
• 缺少空值校验：token不存在时直接调用jwtDecode(token)会抛出解析错误
• saga监听对应关系错误：takeEvery(LOGOUT_USER, logout)监听触发的方法名和你定义的logoutAsync不匹配

修复步骤 #

1. 修正异步登出方法逻辑 #

替换logoutAsync的错误代码，正确调用后端登出接口：

const logoutAsync = async (history) => {
  try {
    // 替换为你实际的后端登出接口地址
    await axios.post('/api/auth/logout')
  } catch (error) {
    // 接口报错不阻塞本地登出流程
    console.error('登出请求异常', error)
  }
  localStorage.clear()
  history.push(adminRoot)
}

2. 修复token校验中间件逻辑 #

修正checkTokenExpiration的重复调用、空值判断问题：

export const checkTokenExpiration = (next) => (action) => {
  const user = JSON.parse(localStorage.getItem('user'))
  const token = user?.token
  // token存在时才做有效期校验
  if (token) {
    try {
      const expTime = jwtDecode(token).exp
      // token过期自动执行登出逻辑
      if (expTime < Date.now() / 1000) {
        localStorage.clear()
        // 无history实例时可直接跳转登录页
        window.location.replace('/login')
        return
      }
    } catch (err) {
      // token解析失败视为无效凭证，直接登出
      localStorage.clear()
      window.location.replace('/login')
      return
    }
  }
  // 正常场景仅传递一次action
  next(action)
}

3. 修正saga监听配置 #

确保takeEvery监听的方法名和你定义的异步登出方法名一致：

function* watchLogoutUser() {
  // 方法名匹配即可，若你的异步方法名是logout就填logout
  yield takeEvery(LOGOUT_USER, logoutAsync)
}

额外说明 #

自动登出逻辑由checkTokenExpiration中间件全局拦截所有action触发时自动校验，不需要和axios登出请求绑定，上述修改完成后即可同时实现手动登出、token过期自动登出功能。

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