欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2022-06-17 16:03:15
按如下步骤进行1.request.js内容:http request请求拦截器和http response服务器响应拦截器配置2.http.js内容:请求数据方式封装3.utils.js内容:获取to...

按如下步骤进行

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

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

3.utils.js内容:获取token,判断token是否存在

4.store文件:

vuex 仓库配置

  • vuex 持久化
  • vuex 模板引用

5.接口的封装

目录

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错误,并重新跳入登页重新获取token
service.interceptors.response.use(
    response => {
        if (response.status === 200) {
            //通讯成功
            // toast.clear();
            /*************
             * response.data.status === 0 错误
             * response.data.status === 100 成功
             * response.data.status === 401 token过期
             *
             * *************/
            // 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

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

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

接口封装

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

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
}

总结

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