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 }})
阅读全文
0 0
- axios拦截token
- axios拦截
- axios 拦截 , 页面跳转, token 验证(经常用于判断用户是否登录)
- vue+axios 登录拦截
- axios实现登录拦截
- Struts2拦截器--token
- token拦截器
- token拦截器
- vue开发:vue+axios实现登录拦截
- axios的拦截请求与响应
- axios拦截设置和错误处理
- axios window.open 拦截处理方法
- axios拦截设置和错误处理
- 【vue+axios】前端实现登录拦截
- Vue+axios 实现http拦截及路由拦截实例
- Axios
- axios
- axios
- AWVS使用教程
- FragmentPagerAdapter.notifyDataSetChanged失效详解
- 滚动条的相关插件(mCustomScrollbar)
- echart主题工具的使用
- selenium自动化测试资源整理(含所有版本chrome、chromedriver、firefox下载链接)
- axios拦截token
- SecureCRT+Xming实现Linux远程图形绘画
- rgggggggggggggg
- TensorFlow-docker
- 深入分析Java ClassLoader原理
- Servlet3.0学习总结(三)——基于Servlet3.0的文件上传
- Android内存泄露检测LeakCanary使用注意点
- 保险学习--资料总结
- 平面设计和网页设计是一个工种吗