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)
})

这样就可以了


版权声明:本文为u014678583原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明。