LWM

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

 

posted on 2023-02-27 20:56  Lwmm  阅读(522)  评论(0编辑  收藏  举报