每个请求都需要携带 token ，所以我们可以使用 axios request 拦截器，在这里，我们给每个请求都加 token,这样就可以节省每个请求再一次次的复制粘贴代码。
token 失效问题，当我们token 失效，我们服务端会返回一个特定的错误表示，比如 token invalid，但是我们不能在每个请求之后去做刷新 token 的操作呀，所以这里我们就用 axios response 拦截器，我们统一处理所有请求成功之后响应过来的数据，然后对特殊数据进行处理，其他的正常分发。

  1. // 给axios添加一个请求拦截器,
  2. axios.interceptors.request.use(config =>{
  3.   // 为请求头添加一个Authorization属性,值为token
  4.   // 这样后,当你请求别的接口时服务器就会先判断你的请求头中有没有Authorization这个属性,
  5.   // 如果没有,就会驳回你的请求.
  6.   config.headers.Authorization = window.sessionStorage.getItem('token');
  7.   // 在最后必须return一个cofig
  8.   return config
  9. })

配置后哪些需要权限的请求就可以通过了

axios二次封装

  1. import axios from 'axios'
  2. import { MessageBox, Message } from 'element-ui'
  3. import storage from './storage'
  4. import config from '@/config/index'
  5. import router from '@/router/index'
  7. // 创建axios对象，并设置请求信息，用于设置请求拦截器
  8. const service = axios.create({
  9.   // 配置请求基础地址
  10.   baseURL: config.baseApi,
  11.   // 设置请求超时时间
  12.   timeout: 5000
  13. })
  15. // 请求拦截
  16. service.interceptors.request.use(
  17.   res => {
  18.     // 在每一次请求时携带上token
  19.     const Token = storage.getItem('Token')
  20.     if (Token) {
  21.       res.headers.Token = Token
  22.     }
  23.     return res
  24.   },
  25.   error => {
  26.     // do something with request error
  27.     console.log(error) // for debug
  28.     return Promise.reject(error)
  29.   }
  30. )
  32. service.interceptors.response.use(
  33.   res => {
  34.     const { code, data, message } = res.data
  35.     // token未过期时，返回的数据
  36.     if (code === 200) {
  37.       return data
  38.     } else {
  39.       // token过期时返回的数据
  40.       if (code === 401) {
  41.         MessageBox.alert('登录已过期，请重新登录！')
  42.         router.push({ path: '/' })
  43.       } else if (code === 403) {
  44.         MessageBox.alert('您没有访问权限')
  45.       } else if (code === 404) {
  46.         MessageBox.alert('访问失败，请检查网络')
  47.       } else if (code === undefined) {
  48.         return res.data
  49.       } else {
  50.         MessageBox.alert(message, '警告', {
  51.           confirmButtonClass: 'el-button--myPrimary',
  52.           type: 'warning'
  53.         })
  54.       }
  55.       return Promise.reject(new Error('error'))
  56.     }
  57.   },
  58.   error => {
  59.     Message({
  60.       message: error.message,
  61.       type: 'error',
  62.       duration: 5 * 1000
  63.     })
  64.     return Promise.reject(error)
  65.   }
  66. )
  68. // 封装request请求
  69. function request (options) {
  70.   // 设置默认数据
  71.   options.method = options.method || 'get'
  72.   options.baseURL = options.baseURL || ''
  74.   if (options.method.toLowerCase() === 'get') {
  75.     options.params = options.data
  76.   }
  78.   // if (config.env === 'prod') {
  79.   //   service.defaults.baseURL = config.baseApi
  80.   // } else {
  81.   //   service.defaults.baseURL = config.mock ? config.mockApi : config.baseApi
  82.   // }
  83.   // 设置基础路径地址，根据不同的接口设置不同的基础路径
  84.   service.defaults.baseURL = options.baseURL
  85.   // 将数据传递给axios对象，并返回
  86.   return service(options)
  87. }
  89. // 给request对象创建不同类型的函数，这样使用时就可以通过request.get(url, data, options){}的方式使用
  90. ['get', 'post', 'put', 'delete', 'patch'].forEach(item => {
  91.   request[item] = (url, data, options) => {
  92.     //返回一个请求接口对象
  93.     return request({
  94.       url,
  95.       data,
  96.       method: item,
  97.       ...options
  98.     })
  99.   }
  100. })
  102. // 导出axios对象，二次封装后的对象
  103. export default request

自动刷新token

  1. Vue.use(Vuex)
  2. Vue.use(VueAxios, axios)
  3. Vue.use(qs)
  4. 注：qs，。
  6. 在 request 拦截器实现
  8. axios.interceptors.request.use(
  9.  config => {
  10.   config.baseURL = '/api/'
  11.   config.withCredentials = true // 允许携带token ,这个是解决跨域产生的相关问题
  12.   config.timeout = 6000
  13.   let token = sessionStorage.getItem('access_token')
  14.   let csrf = store.getters.csrf
  15.   if (token) {
  16.    config.headers = {
  17.     'access-token': token,
  18.     'Content-Type': 'application/x-www-form-urlencoded'
  19.    }
  20.   }
  21.   if (config.url === 'refresh') {
  22.    config.headers = {
  23.     'refresh-token': sessionStorage.getItem('refresh_token'),
  24.     'Content-Type': 'application/x-www-form-urlencoded'
  25.    }
  26.   }
  27.   return config
  28.  },
  29.  error => {
  30.   return Promise.reject(error)
  31.  }
  32. )
  33. //在 response 拦截器实现
  35. axios.interceptors.response.use(
  36.  response => {
  37.   // 定时刷新access-token
  38.   if (!response.data.value && response.data.data.message === 'token invalid') {
  39.    // 刷新token
  40.    store.dispatch('refresh').then(response => {
  41.     sessionStorage.setItem('access_token', response.data)
  42.    }).catch(error => {
  43.     throw new Error('token刷新' + error)
  44.    })
  45.   }
  46.   return response
  47.  },
  48.  error => {
  49.   return Promise.reject(error)
  50.  }
  51. )