设置请求拦截器和响应拦截器
使用axios// 添加请求拦截器
每个请求体里加上token
axios.interceptors.request.use(
function (config) {
// 在发送请求之前做些什么
return config;
},
function (error) {
// 对请求错误做些什么
return Promise.reject(error);
}
);
// 添加响应拦截器
//服务器返回登录状态失效,需要重新登录的时候,跳转到登录页
axios.interceptors.response.use(
function (response) {
// 对响应数据做点什么
return response;
},
function (error) {
// 对响应错误做点什么
return Promise.reject(error);
}
);
在项目中使用的例子
axios.defaults.headers.post["Content-Type"] = "application/json"; //设置请求头中的媒体类型信息
axios.defaults.baseURL = "http://192.168.2.7:30001/api/v1"; //设置请求不同域名的接口
//http request 请求拦截器,有token值则配置上token值
axios.interceptors.request.use((config) => {
//在发送请求之前在请求头中添加token;
//在页面登录的时候先把token设置到sessionStorage(看需求,也可以放在localStorage或者cookie)里面;
window.sessionStorage.setItem("token", res.data.accessToken);
config.headers["Authorization"] =
"Bearer " + window.sessionStorage.getItem("token");
return config;
}),
function (error) {
return Promise.reject(error);
};
拦截到401的错误之后,拿到之前登录的时候存在sessionStorage里面的refreshToken,用于token过期以后调取刷新token,暂时只做了401的情况,还有很多情况还没写
// 响应拦截器
axios.interceptors.response.use(
(response) => {
const res = response.data;
if (res) {
return response;
} else {
return Promise.reject("error");
}
},
(error) => {
if (error.response.status != 401) {
router.push({ path: "/login" });
return;
}
//响应为401的情况
var errorResp = error.response;
let refreshToken = window.localStorage.getItem("refreshToken");
if (!refreshToken) {
router.push({ path: "/login" });
return;
}
return new Promise((resolve, reject) => {
axios({
url: `/api/refreshtoken?refreshToken=${refreshToken}`,
method: "post",
})
.then(({ data }) => {
if (data.state) {
window.localStorage.setItem("token", data.data);
axios(errorResp.config)
.then((retryRet) => {;
resolve(retryRet);
})
.catch((err) => {
reject("error");
});
} else {
//如果刷新token业务级失败,也返回登录页
router.push({ path: "/login" });
}
})
.catch((err) => {
//如果刷新token执行失败,则跳回登录页
router.push({ path: "/login" });
});
});
}
),