vue axios请求和响应拦截器

这里以储存后台返回来的Authorization，然后本地永久储存为例

 

第一步：通过登录接口后获取返回回来的token值，然后本地储存，localStorage.setItem('token', res.data.result.Authorization)

第二步：main.js

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import Axios from 'axios'

// http 请求拦截器
Axios.interceptors.request.use((config) => {
  var token = localStorage.getItem('token');
  // 判断是否存在token，如果存在的话，则每个http header都加上token
  if (token) {
    config.headers['Authorization'] = token;
  }
  return config
}, (err) => {
  return Promise.reject(err);
})

// http 响应拦截器
Axios.interceptors.response.use((response) => {
  var token = response.headers.authorization;
  if (token) {
    store.dispatch('ActionLogin', token);
  }
  // var code = response.data.code;
  
  return response
}, error => {
  if (error.response) {
    //跟后台约定好，一旦token失效或者没有就返回错误的状态码:xxxx，例1001
    switch (error.response.status) {
      case 1001:
        //你要执行的登录代码
        
        break
    }
  }
  return Promise.reject(error)
})

这样就可以了