vue 请求拦截器的配置方法详解
按如下步骤进行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:
})
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
}总结
本篇文章就到这里了，希望能够给你带来帮助，也希望您能够多多关注脚本之家的更多内容!
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！
页:
[1]