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

快乐人L · 发表于 2022-3-26 10:59:25

按如下步骤进行
1.

request.js

复制代码

内容：http request请求拦截器和http response服务器响应拦截器配置
2.

http.js

复制代码

内容：请求数据方式封装
3.

utils.js

复制代码

内容：获取token，判断token是否存在
4.

store

复制代码

文件：
vuex 仓库配置

vuex 持久化
vuex 模板引用

5.接口的封装
目录

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

复制代码

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 请求拦截器的配置方法详解

本帖子中包含更多资源