VUE 项目 axios 统一异常返回拦截跳转登录页面

2021年07月29日 135点热度 0人点赞 0条评论

在 vue 项目中,axios 很方便的提供了返回值统一拦截检查,可以根据此方法很方便的 判断后台返回值 将用户操作弹出登录界面。

axiosConfig.js 中增加

axios.interceptors.response.use(response => {
    return response;
},error => {
    if (error.response) {
        switch (error.response.status) {
            // 返回401,清除token信息并跳转到登录页面
            case 401:
                localStorage.removeItem('userToken');
                localStorage.removeItem('userRefreshToken');
                router.replace({
                    path: '/'
                    //登录成功后跳入浏览的当前页面
                    // query: {redirect: router.currentRoute.fullPath}
                })
        }
        // 返回接口返回的错误信息
        return Promise.reject(error.response.data);
    }
});

同时,提交前也可以增加前置处理方法用于请求前触发,设置 token 等

axios.interceptors.request.use(
    config => {
        const token = localStorage.getItem("userToken");
        const refreshToken = localStorage.getItem("userRefreshToken");
        if(!config.headers == {'Content-Type': 'false'}){
            config.data = JSON.stringify(config.data);
            config.headers = {
                'Content-Type': 'application/json'
            };
        }
        if (token && refreshToken) {
            config.headers.token = token;
            config.headers.refreshToken = refreshToken;
        }
        /*else{
              config.headers.Authorization = "";
            }*/
        return config;
    },
    err => {

        return Promise.reject(err);
    }
);

浮生一程

读书-行路-悦人-识物