import axios from "axios";
import router from "@/router/routers";
import { Notification } from "element-ui";
import store from "../store";
import { getToken } from "@/utils/auth";
import Config from "@/settings";
import Cookies from "js-cookie";
// 重试次数
axios.defaults.retry = 1;
axios.defaults.retryDelay = 1000;
window.isWaitRequest = false;
let requests = [];
// 挂起的请求
const refreshSubscribers = [];
/* 将所有的请求都push到数组中,其实数组是[function(token){}, function(token){},...]*/
function subscribeTokenRefresh(cb) {
refreshSubscribers.push(cb);
}
/* 数组中的请求得到新的token之后自执行,用新的token去请求数据*/
function onRefreshed(token) {
refreshSubscribers.map(cb => cb(token));
}
// 创建axios实例
const service = axios.create({
baseURL:
process.env.NODE_ENV === "production" ? process.env.VUE_APP_BASE_API : "/", // api 的 base_url
timeout: Config.timeout // 请求超时时间
});
// request拦截器
service.interceptors.request.use(
config => {
if (getToken()) {
config.headers["Authorization"] = "bearer " + getToken(); // 让每个请求携带自定义token 请根据实际情况自行修改
}
if (config.url === "/auth/oauth/token") {
config.headers["Authorization"] =
"Basic eW91aWRhbi1zdG9jay13ZWI6c3RvY2tAMTIz";
config.headers["Content-Type"] = "application/x-www-form-urlencoded";
} else {
config.headers["Content-Type"] = "application/json";
}
return config;
},
error => {
Promise.reject(error);
}
);
// accessToken失效 并重新请求失效接口
function refresh() {
const ref = Cookies.get(Config.RefreshKey);
return axios.get("/auth/oauth/token", {
params: {
grant_type: "refresh_token",
client_id: "youlai-admin",
client_secret: "123456",
refresh_token: ref
}
});
}
// response 拦截器
service.interceptors.response.use(
response => {
// token 已过期 重新登录
if (response.data.code === "A0231") {
if (!window.isWaitRequest) {
window.isWaitRequest = true;
refresh().then(refreshResponse => {
// 重新设置token
setToken(
refreshResponse.data.token.access_token,
refreshResponse.data.token.refresh_token,
true
);
// 重新请求接口 前过期的接口
response.config.headers.Authorization =
refreshResponse.data.token_type +
" " +
refreshResponse.data.access_token;
response.config.headers.withCredentials = true;
requests.length > 0 &&
requests.map(cb => {
cb();
});
requests = []; // 注意要清空
window.isWaitRequest = false;
return service(response.config);
});
} else {
return new Promise(resolve => {
requests.push(() => {
response.config.headers.Authorization = "bearer " + getToken;
response.config.headers.withCredentials = true;
resolve(service(response.config));
});
});
}
}
// 刷新token失效 跳转登录页
if (response.data.code === "A0314") {
this.$store.dispatch("LogOut").then(() => {
location.reload();
});
}
console.log(response.data);
return response.data;
},
error => {
// 兼容blob下载出错json提示
if (
error.response.data instanceof Blob &&
error.response.data.type.toLowerCase().indexOf("json") !== -1
) {
const reader = new FileReader();
reader.readAsText(error.response.data, "utf-8");
reader.onload = function(e) {
const errorMsg = JSON.parse(reader.result).message;
Notification.error({
title: errorMsg,
duration: 5000
});
};
} else {
let code = 0;
try {
code = error.response.data.status;
} catch (e) {
if (error.toString().indexOf("Error: timeout") !== -1) {
Notification.error({
title: "网络请求超时",
duration: 5000
});
return Promise.reject(error);
}
}
console.log(code);
if (code) {
if (code === 401) {
store.dispatch("LogOut").then(() => {
// 用户登录界面提示
Cookies.set("point", 401);
location.reload();
});
} else if (code === 403) {
router.push({ path: "/401" });
} else {
const errorMsg = error.response.data.message;
if (errorMsg !== undefined) {
Notification.error({
title: errorMsg,
duration: 5000
});
}
}
} else {
Notification.error({
title: "接口请求失败",
duration: 5000
});
}
}
return Promise.reject(error);
}
);
export default service;
export const service2 = axios.create({
baseURL: "http://192.168.1.113:9000",
timeout: Config.timeout // 请求超时时间
});
刷新 token
最后编辑于 :
©著作权归作者所有,转载或内容合作请联系作者
- 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
- 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
- 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
推荐阅读更多精彩内容
- 今天我们来说一说前后端分离中的无痛刷新token机制,在手机app中应该经常用到, 大家都知道在前后端是以toke...
- 需求 最近遇到个需求:前端登录后,后端返回token和token有效时间,当token过期时要求用旧token去获...