Vue+Axios项目如何统一处理服务端指定错误码实现登录页重定向

核心实现逻辑 #

这类场景完全可以利用Axios原生的响应拦截器做集中处理，不需要逐个业务请求编写判断逻辑，把所有统一规则收敛在单一维护入口，从根本上降低数百个请求的维护成本。

具体实现流程 #

• 封装全局统一Axios实例，在实例中配置响应拦截器
  拦截器会在所有请求的响应返回到业务代码之前，统一完成业务状态码判断：一旦识别到服务端返回的Code = 123（token过期/被主动吊销），就自动触发登出、状态重置、重定向登录页的逻辑，业务代码完全无感知。
  示例参考代码：

  // 项目统一Axios入口文件
  import axios from 'axios'
  import router from '@/router'
  import store from '@/store'
  
  // 创建全局共享的Axios实例
  const request = axios.create({
    baseURL: '/api',
    timeout: 10000
  })
  
  // 响应拦截器：集中处理所有请求的返回校验
  request.interceptors.response.use(
    (response) => {
      const res = response.data
      // 集中判断token失效场景
      if (res.code === 123) {
        // 清理本地存储的无效登录凭证
        localStorage.removeItem('app_token')
        // 重置Vuex存储的用户登录状态
        store.commit('userModule/clearLoginState')
        // 跳转到登录页，携带当前页面路径支持登录后自动回跳
        router.replace({
          path: '/login',
          query: {
            redirect: router.currentRoute.value.fullPath
          }
        })
        // 中断当前业务请求的后续处理
        return Promise.reject(new Error(res.msg || '登录状态已失效，请重新登录'))
      }
      // 非token异常的正常响应，透传给业务代码处理
      return res
    },
    (error) => {
      // 可在此扩展HTTP层面错误（如500、网络超时）的统一提示
      return Promise.reject(error)
    }
  )
  
  export default request
  

• 统一全项目请求发起入口
  要求所有业务模块的接口请求，全部基于上述封装的Axios实例发起，禁止零散引入原生Axios发送请求，从代码规范上保证所有请求都会经过全局拦截逻辑的校验，避免出现漏判场景。
• 补充路由守卫做兜底校验
  由于无法完全避免前端缓存的失效token绕过接口判断的场景，需要配套添加Vue Router的全局前置守卫：当用户访问需要登录权限的业务路由时，先校验本地是否存在有效token，若不存在则直接重定向到登录页，和接口拦截逻辑形成双保险。

维护收益 #

• 所有和token失效判断、登出逻辑相关的代码全部收敛在拦截器、路由守卫两个固定位置，后续如果服务端调整token失效返回的错误码，只需要修改拦截器中的一处判断即可，不需要遍历修改数百个业务请求文件。
• 统一判断逻辑和业务代码完全解耦，不会侵入各个业务组件的请求处理流程，后续重构时不需要分散排查零散的权限判断逻辑。

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