vue项目统一配置请求头以及校验登录状态

刺骨的言语ヽ痛彻心扉 2023-05-22 04:52 15阅读 0赞

**main.js**

import  './utils/http'

**在http.js中**

import Vue from 'vue'
    import axios from 'axios'
    import qs from "qs";
    axios.defaults.baseURL = 'xxxx'; //接口地址
    // 校验token 封装header统一带token
    import Cookies from 'js-cookie'
    import router from '../router/index'
    axios.interceptors.request.use(config => {  //配置axios请求头，axios每次发起请求携带token，在Network中的headers看的到
        // console.log(config)
        let token = Cookies.get('token')
        if (token) { 
            config.headers.token = token //token 是请求头要求加上的字段
        }
        return config
    })
    // 验证登陆状态
    var v = new Vue({ router});
    axios.interceptors.response.use(
        response => { 
            if (response.data.code == 401) { 
                // console.log(_that);
                v.$notify.error({ 
                    title: '错误',
                    message: '登录过期请重新登录'
                });
                
                Cookies.remove('token');
                
                v.$router.push('/login')
                return
            } else { 
                return response;
            }
        },
        error => { 
            console.log(error.response);
            if (error.response) { 
                switch (error.response.status) { 
                    case 401:
                        401
                        // 返回 401 清除token信息并跳转到登录页面 401时后台给的 如果不是401 就继续调用接口 
                         Cookies.remove('token');
                
                        console.log('报错了');
                }
            }
            return Promise.reject(error.response.data) // 返回接口返回的错误信息
        });
    Vue.prototype.$axios = axios
    Vue.prototype.$qs = qs
    export default ({ 
    })