axios拦截token

来源:互联网 发布:linux setlocale 函数 编辑:程序博客网 时间:2024/05/20 11:51

1、首先设置拦截器,拦截token,给全局http请求header中加上token

import axios from 'axios'import store from './store'//将token存入全局store中// http请求拦截器axios.interceptors.request.use(config => {//请求  if(store.state.token){//如果token存在    config.headers.token = store.state.token;  };  store.state.loadState = true;  return config}, error => {  store.state.loadState = false;  return Promise.reject(error)})axios.interceptors.response.use(data => {//响应  store.state.loadState = false;  if(data.data.respCode === '00'){//状态码判断,00成功状态    return data.data  }  if(data.data.respCode === '000000'){//状态码000000为成功状态     return data.data  } else{    store.state.messageWarningState = true;    store.state.tipsMsg_warn = data.data.respMsg;    setTimeout(() =>{      store.state.messageWarningState = false;    }, 2000);  };  // return data.data}, error => {  store.state.loadState = false;  store.state.messageWarningState = true;  setTimeout(() =>{    store.state.messageWarningState = false;  }, 2000);  return Promise.reject(error)})export default axios

2、在store中获取token

import Vue from 'vue'import Vuex from 'Vuex'Vue.use(Vuex);//使用cookie截取token,根据公司token存储方式不同截取方式不同var VueCookie = require('vue-cookie');Vue.use(VueCookie);const store = new Vuex.Store({//新建一些全局变量//定义状态state:{    //某些全局变量,或者数据    token:VueCookie.get('key')//token以‘key’值保存,一般前端页面样式调整可将token设为固定值    }})export default store;

3、在main.js中配置axios和注册全局变量

// The Vue build version to load with the `import` command// (runtime-only or standalone) has been set in webpack.base.conf with an alias.import Vue from 'vue'import App from './App'import router from './router'//引入storeimport Vuex from 'vuex'import store from './components/commonjs/store'Vue.use(Vuex);// http请求,即全局axios配置import axios from './components/commonjs/http'import VueAxios from 'vue-axios'Vue.use(VueAxios, axios)//Vue.prototype.$vux = Vux// cookievar VueCookie = require('vue-cookie');Vue.use(VueCookie);// filterimport './components/commonjs/filter'Vue.config.productionTip = false/* eslint-disable no-new */new Vue({  el: '#app',  router,  store,//注册store  template: '<App/>',  components: { App }})