问题:初期沟通有问题,项目在开发中开发人员各自封装 axios(4 种),而且有的开发人员在自己封装的 axios 中做了数据处理中,现在要做 token 失效后跳转登录页面。
方案设想:统一所有人的 axios,但是由于开发人员在自己 axios 中做了大量的业务处理,所有改起来成本比较大,而且需要重现测试,所有暂时无法做到统一。
确定方案:利用 axios 的拦截器功能可以统一对 request 和 response 做处理。
这里简单介绍下 axios 对响应 response 处理的用法,我的想法是在主文件(app.js/main.js)中利用 axiox 的拦截器功能进行判断处理是否跳转登录。
// 添加响应拦截器
//防止 401 接口循环调用(公司 401 代表未登录或者 token 失效)
let isLogout = false;
axios.interceptors.response.use(function (response) {
if (response?.data?.state == 401) {
//由于 登录和应用不在一个项目 所以本地开发 不做退出登录操作
if (!isLogout) {
isLogout = true;
logoutClear()// 清除缓存、token 等和登录有关数据
handleLogin();//跳转到指定页面(登录页面)
setTimeout(() => {
// 避免重复跳转指定页面 等待 2 秒 让其他接口执行完毕
isLogout = false;
}, 2 * 1000);
}
} else return response;
}, function (error) {
// 对响应错误数据处理
return Promise.reject(error);
});