vue---axios拦截器处理登录失效跳转登录页
axios拦截器(Interceptors)主要分为:(1)请求拦截器:在发送请求前进行拦截,可以根据发送的请求参数做一些发送参数的调整,例如设置headers(2)响应拦截器:在后台返回响应时进行拦截,可以根据状态码进入下一步处理。例如:登录失效跳转回登录页。项目需求:根据后台返回的状态码,统一处理。例如:token失效,回到登录页面;返回错误,给出统一的错误提示。完整代码:...
·
axios拦截器(Interceptors)主要分为:
(1)请求拦截器:在发送请求前进行拦截,可以根据发送的请求参数做一些发送参数的调整,例如设置headers
(2)响应拦截器:在后台返回响应时进行拦截,可以根据状态码进入下一步处理。例如:登录失效跳转回登录页。
项目需求:根据后台返回的状态码,统一处理。例如:token失效,回到登录页面;返回错误,给出统一的错误提示。
完整代码:
// 导入axios
import axios from "axios";
import { MessageBox } from "element-ui";
const querystring = require("querystring");
import ElementUI from "element-ui";
// 设置基地址-使用自定义配置新建一个 axios 实例
// 注意:打包时baseURL要加上api,即baseURL: "/api"
const http = axios.create({
baseURL: "/",
headers: { accessToken: localStorage.getItem("token") }
});
// 拦截响应response,并做一些错误处理
http.interceptors.response.use(
response => {
// 登录失效处理
if (response.data.respCode == "00002") {
MessageBox.alert(response.data.respDesc, "登录失效", {
confirmButtonText: "跳转登录页面",
callback: action => {
// 跳转登录页
window.location.href = "/";
}
});
} else if (response.data.respCode != "00000") {
if (response.data.respDesc != "") {
ElementUI.Message({
title: "错误",
message: response.data.respDesc,
type: "error"
});
}
}
return response;
},
error => {
if (error.response.status == 401) {
ElementUI.Message({
title: "警告",
message: error.response.data.respDesc,
type: "warning"
});
}
return Promise.reject(error);
}
);
export default http;
// ******一、登录******
// 登录请求
export const login = param => {
return http.post("oauth/login/user", param, { headers: { accessToken: "" } });
};
// 退出登录
export const logout = () => {
// 退出登录需要清除token
return http.get("/oauth/logout", { headers: { accessToken: "" } });
};
参考文章:
更多推荐
已为社区贡献45条内容
所有评论(0)