Vue:全局拦截所有请求,并在请求头中添加token - 道祖且长 - 博客园 (cnblogs.com)
util.js
export function sessionSet(user){ let jsonStr=JSON.stringify(user); sessionStorage.setItem("user",jsonStr); } export function sessionGet(){ let jsonStr=sessionStorage.getItem("user"); let user=JSON.parse(jsonStr); return user; } // token设置 export function tokenSet(token){ let jsonStr=JSON.stringify(token); sessionStorage.setItem("token",jsonStr); } // token获取 export function tokenGet(){ let jsonStr=sessionStorage.getItem("token"); let token=JSON.parse(jsonStr); return token; } export function sessionDestroy(){ sessionStorage.setItem("user",null); }
main.js
import Vue from 'vue' import App from './App.vue' import router from './router' import axios from 'axios' import qs from 'qs' import ElementUI from 'element-ui' import 'element-ui/lib/theme-chalk/index.css'; import './assets/default.css' import Message from 'element-ui'; import { sessionSet, sessionGet, sessionDestroy, tokenSet, tokenGet, } from './util.js' Vue.use(ElementUI); Vue.config.productionTip = false //设置axios的基础url部分 axios.defaults.baseURL = "xxx"; // 把axios请求对象挂载到vue.prototype原型对象中,在组件中通过this.xxx直接访问 Vue.prototype.$axios = axios; Vue.prototype.$qs = qs; Vue.prototype.$sessionSet = sessionSet; Vue.prototype.$sessionGet = sessionGet; Vue.prototype.$sessionDestroy = sessionDestroy; Vue.prototype.$tokenSet = tokenSet; Vue.prototype.$tokenGet = tokenGet; Vue.prototype.$msg = Message; // 添加请求拦截器 axios.interceptors.request.use(function(config) { console.log(config) // 在发送请求之前做些什么 // 判断是否存在token,如果存在将每个页面header添加token if (this.tokenGet()) { // 排除一些链接加token(除了网上的业务,线下业务不加token) if (config.url == '/xxx/xxx') { return config; } else { config.headers.Authorization = this.tokenGet(); } } return config; }, function(error) { router.push('/') return Promise.reject(error) }) new Vue({ router, render: h => h(App) }).$mount('#app')