Vue中使用axios拦截器拦截账号退出

Eva_伊娃

于 2019-09-19 17:10:49 发布

阅读量906

点赞数

分类专栏： VUE

本文链接：https://blog.youkuaiyun.com/u014445517/article/details/101028029

版权

本文介绍了在Vue项目中使用axios拦截器处理401未授权错误的情况，当遇到401错误时实现自动退出登录。在实现过程中，通过对比axios官方文档和网络资源，解决了在获取响应状态码时的困惑，发现正确状态码为res.status而非res.code。同时提及在拦截器中尝试使用vuex进行全局loading管理但未能成功，期待与社区交流解决方案。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

使用过程中，当登录账号异常退出的时候，页面请求接口数据会报401，这时候页面需要退出重新登录，我的实现方式是：

import axios from 'axios'
import { MessageBox } from 'element-ui'
import { getToken } from '@/utils/auth'

// create an axios instance
const service = axios.create({
  baseURL: process.env.BASE_API, // api 的 base_url
  timeout: 10000 // request timeout
})

// request interceptor
service.interceptors.request.use(
  config => {
    // Do something before request is sent
    // if (store.getters.token) {
    //   // 让每个请求携带token-- ['X-Token']为自定义key 请根据实际情况自行修改
    //   config.headers['X-Token'] = getToken()
    // }
    return config
  },
  error => {
    // Do something with request error
    console.log(error) // for debug
    Promise.reject(error)
  }
)

// response interceptor
service.interceptors.response.use(
  response => response,
  /**
   * 下面的注释为通过在response里，自定义code来标示请求状态
   * 当

最低0.47元/天解锁文章