前后端分离鉴权：token和axios请求响应拦截器

// main.js
import Vue from 'vue'
import App from './App'
import router from './router'
import store from './store'

import axios from 'axios'
Vue.prototype.$axios = axios

Vue.config.productionTip = false

import MetaInfo from 'vue-meta-info'
Vue.use(MetaInfo)

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  store,
  components: { App },
  template: '<App/>',
  created() {
    //axios请求响应拦截器
    this.$axios.interceptors.request.use(
      //拦截请求
      (config) => {
        //console.log(this.$store.state.token)
        if (localStorage.getItem('token')) {
          //查询本地是否存在token
          config.headers.Authorization = localStorage.getItem('token') //在请求头里设置token
        }
        return config
      },
      (err) => {
        return Promise.reject(err)
      }
    ),
      this.$axios.interceptors.response.use(
        //拦截响应
        (response) => {
          var token = response.headers.authorization
          if (token) {
            //查询响应头里是否存在token
            this.$store.dispatch('refreshToken', token) //存在则调用store替换本地token 可以根据自己的业务 更简单的做法是直接在这里替换localStorage的token
          }
          return response
        },
        (error) => {
          console.log(error)
          return Promise.reject(error)
        }
      )
  },
})