vue请求拦截器的配置方法是什么

这篇文章给大家介绍Vue请求拦截器的配置方法是什么，内容非常详细，感兴趣的小伙伴们可以参考借鉴，希望对大家能有所帮助。

request.js内容

Http request请求拦截器和http response服务器响应拦截器配置

// http request 请求拦截器，有token值则配置上token值import axiOS from 'axios'import Promise from 'promise'import util from './utils';import store from './../store/index';const service = axios.create({    timeout: 60000, // 请求超时时间    headers: {        // Authorization: Authorization,        'Content-Type': 'application/JSON;charset=UTF-8'    }});// http请求拦截器service.interceptors.request.use(    config => {        let tokenExist = util.tokenExist();        if (tokenExist) {            // bus.$emit('toggleloading', true)//显示loading            //如果token存在            config.headers['Authorization'] = `Bearer ${util.getToken()}`;        }        // Toast.loading({        //     message: '加载中...',        //     duration: 0,        //     forbidClick: true        // });        return config;    },    error => {        Promise.reject(error);    })// http response 服务器响应拦截器，// 这里拦截401错误，并重新跳入登页重新获取tokenservice.interceptors.response.use(    response => {        if (response.status === 200) {            //通讯成功            // Toast.clear();                        // bus.$emit('toggleloading', false)//隐藏loading            if (response.data.state === 401) {                //如果是token过期，跳转至登录                Message.error("登录已过期，请重新登录！");                store.commit('SET_TOKEN', '');                util.GoLogin();            } else if (response.data.state === 0) {                // Message.error(response.data.message);                return response.data;            } else {                return response.data;            }        }    },    error => {        //请求失败        // ;        const response = error.response;        if (response.status === 401) {            // Toast.fail(response.data.message);            Message.error("登录已过期，请重新登录！");            util.goLogin();        } else if (response.status === 403) {            $router.push({                name: '403'            });        } else {            // Toast.fail(response.data.message ? response.data.message : '系统错误请联系管理员');            // Message.error({            //     message: '无服务，请联系管理员'            // });        }        return Promise.reject(error);    });export default service;

http.js内容

请求数据方式

import request from './request';// import store from './../store/index';const http = {    request(config) {        request(config);    },    post(url, data) {        // if(data instanceof Object){        // }else{        //     data = {        //         ...data        //     };        // }        return request({            url,            method: 'post',            data        });    },    postFile(url, data, contentType) {        return request({            url,            method: 'post',            data,            contentType        });    },    get(url, params) {        return request({            url,            method: 'get',            params        });    },    put(url, data) {        return request({            url,            method: 'put',            data        });    },    delete(url) {        return request({            url,            method: 'delete'        });    },    download(url, params) {        return request({            url,            method: 'get',            params,            responseType: 'blob'        });    },    downloadPost(url, data) {        return request({            url,            method: 'post',            data,            responseType: 'blob'        });    }};export default http;

utils.js内容

获取token，判断token是否存在

import store from '../store/index';let util = {    //获取token    getToken() {        return store.getters.token;    },    //判断token是否存在    tokenExist() {        let flag;        let token = store.getters.token;        if (token && token !== '') {            flag = true;        } else {            flag = false;        }        return token;    },}export default util

vuex 仓库配置

• vuex 持久化

• vuex 模板引用

index.js内容

import Vue from "vue"import Vuex from "vuex"import VuexPersistence from 'vuex-persist';import db from './db'Vue.use(Vuex)//vuex 状态持久化const vuexLocal = new VuexPersistence({    storage:window.localStorage})const store = new Vuex.Store({    state:{},    mutations:{},    actions:{},    modules:{        db    },    plugins:[vuexLocal.plugin]})export default store

 db.js内容

const db = {    state: {        token: '',    },    getters:{        token:state => state.token    },    mutations: {        // 存储token        setToken: (state, value) => {            state.token = value        }    },    actions: {}}export default db

接口封装

import http from "../common/http"// 测试接口function text(params){    return http.get("api/Test/GetList", params)}//登录  function Login(params) {    return http.post("api/Login/Login", params)}// 获取图形验证码function GetValidateCode(params) {    return http.post("api/Login/GetValidateCode", params)}// 获取手机验证码 注意：需要提前人机验证后调用 否则有被恶意刷短信的风险function GetPhoneCode(params) {    return http.post("api/Login/GetPhoneCode", params)}// 注册 校验信息function ReGISterUserVerify(params) {    return http.post("api/Login/RegisterUserVerify", params)}// 注册 设置密码 注册用户信息function RegisterUserInfo(params) {    return http.post("api/Login/RegisterUserInfo", params)}// 忘记密码 验证姓名手机号function ResetPassWordVerify(params) {    return http.post("api/Login/ResetPasswordVerify", params)}// 忘记密码 密码更新function ResetPassWord(params) {    return http.post("api/Login/ResetPassWord", params)}export {    Login,    text,    GetPhoneCode,    RegisterUserVerify,    GetValidateCode,    ResetPasswordVerify,    ResetPassWord,    RegisterUserInfo}

关于vue请求拦截器的配置方法是什么就分享到这里了，希望以上内容可以对大家有一定的帮助，可以学到更多知识。如果觉得文章不错，可以把它分享出去让更多的人看到。