vue下axios拦截器token刷新机制的实例代码

下面我将为您讲解“Vue下Axios拦截器Token刷新机制的实例代码”的完整攻略，包括以下几个方面：

什么是拦截器

在使用axios发起请求时，我们可以使用拦截器对请求进行拦截、修改，以及对响应进行拦截、统一处理等操作。而在vue项目中，我们常使用axios拦截器实现Token的自动刷新机制。

实现Token的自动刷新机制

具体实现步骤如下：

(1) 在main.js文件中，引入axios和store，并将axios挂载到Vue原型上：

import axios from 'axios'
import store from './store'

// 设置axios为json格式
axios.defaults.headers.post['Content-Type'] = 'application/json'

// 将axios挂载到Vue原型上
Vue.prototype.$axios = axios

(2) 创建axios实例，并在其中设置请求拦截器和响应拦截器：

const instance = axios.create({
  // 基础url，将自动加在url前面，除非url是一个绝对url。
  baseURL: process.env.VUE_APP_BASE_API,
  // 设置超时时间
  timeout: 5000
})

// 请求拦截器：在每个请求前，如果存在token，则在请求头中携带token
instance.interceptors.request.use(
  config => {
    if (store.getters.token) {
      config.headers.common['Authorization'] = getToken()
    }
    return config
  },
  error => {
    return Promise.reject(error)
  }
)

// 响应拦截器：在每个响应收到后，判断是否token过期，如果过期则自动刷新token
instance.interceptors.response.use(
  response => {
    const res = response.data
    if (res.code === 50008 || res.code === 50012 || res.code === 50014) { // token过期或非法请求
      MessageBox.confirm('登录已过期，请重新登录', '提示', {
        confirmButtonText: '重新登录',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        store.dispatch('user/resetToken').then(() => {
          location.reload() // 为了重新实例化vue-router对象 避免bug
        })
      })
    }
    return res
  },
  error => {
    return Promise.reject(error)
  }
)

(3) 在Vuex中定义token相关的state和action：

const state = {
  token: getToken(),
  // ...
}

const mutations = {
  SET_TOKEN: (state, token) => {
    state.token = token
  },
  // ...
}

const actions = {
  login({ commit }, userInfo) {
    // ...
    commit('SET_TOKEN', token)
  },

  resetToken({ commit, state }) {
    return new Promise(resolve => {
      // ...
      commit('SET_TOKEN', '')
      resolve()
    })
  },
  // ...
}

示例说明

(1) 用户首次登录并成功获取Token后，将其存储到Vuex的state中：

axios.post('/user/login', {
  username: this.username,
  password: this.password
}).then(response => {
  const { data } = response
  // 保存token到vuex中
  this.$store.commit('SET_TOKEN', data.token)
})

(2) 用户已登录，再次发起请求时，axios将自动携带Token请求头：

this.$axios({
  url: '/user/info',
  method: 'post',
  data: { /* 请求参数 */ }
}).then(response => {
  const { data } = response
  // 处理响应数据
}).catch(error => {
  console.log(error)
})