vue 请求拦截器的配置方法详解

按如下步骤进行

1.request.js内容：http request请求拦截器和http respon服务器响应拦截器配置

2.http.js内容：请求数据方式封装

3.utils.js内容：获取token，判断token是否存在

4.store文件：

vuex 仓库配置

5.接口的封装

目录

request.js内容

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

// http request 请求拦截器，有token值则配置上token值import axios from 'axios'import promi from 'promi'import util from './utils';import store from './../store/index';const rvice = axios.create({    timeout: 60000, // 请求超时时间    headers: {        // authorization: authorization,        'content-type': 'application/json;chart=utf-8'    }});// http请求拦截器rvice.恐怖灵异interceptors.request.u(    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 => {        promi.reject(error);    })// http respon 服务器响应拦截器，// 这里拦截401错误，并重新跳入登页重新获取tokenrvice.interceptors.respon.u(    respon =广东科学技术学院> {        if (respon.status === 200) {            //通讯成功            // toast.clear();            /*************             * respon.data.status === 0 错误             * respon.data.status === 100 成功             * respon.data.status === 401 token过期             *             * *************/            // bus.$emit('toggleloading', fal)//隐藏loading            if (respon.data.state === 401) {                //如果是token过期，跳转至登录                message.error("登录已过期，请重新登录！");                store.commit('t_token', '');                util.gologin();            } el if (respon.data.state === 0) {                // message.error(respon.data.message);                return respon.data;            } el {                return respon.data;            }        }    },    error => {        //请求失败        // ;        const respon = error.respon;        if (respon.status === 401) {            // toast.fail(respon.data.message);            message.error("登录已过期，请重新登录！");            util.gologin();        } el if (respon.status === 403) {            $router.push({                name: '403'            });        } el {            // toast.fail(respon.data.message ? respon.data.message : '系统错误请联系管理员');            // message.error({            //     message: '无服务，请联系管理员'            // });        }        return promi.reject(error);    });export default rvice;

http.js内容

请求数据方式

import request from './request';// import store from './../store/index';const http = {    request(config) {        request(config);    },    post(url, data) {        // if(data instanceof object){        // }el{        //     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,            respontype: 'blob'        });    },    downloadpost(url, data) {        return request({            url,            method: 'post',            data,            respontype: '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;        } el {            flag = fal;        }        return token;    },}export default util

vuex 仓库配置

index.js内容

import vue from "vue"import vuex from "vuex"import vuexpersistence from 'vuex-persist';import db from './db'vue.u(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        ttoken: (state, value) => {            state.token = value        }    },    actions: {}}export defaul妙想科学t 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 registerurverify(params) {    return http.post("api/login/registerurverify", params)}// 注册 设置密码 注册用户信息function registerurinfo(params) {    return http.post("api/login/registerurinfo", params)}// 忘记密码 验证姓名手机号function retpasswordverify(params) {    return http.post("api/login/retpasswordverify", params)}// 忘记密码 密码更新function retpassword(params) {    return http.post("api/login/retpassword", params)}export {    login,    text,    getphonecode,    registerurverify,    getvalidatecode,    retpasswordverify,    retpassword,    registerurinfo}

总结

本篇文章就到这里了，希望能够给你带来帮助，也希望您能够多多关注www.887551.com的更多内容!