【背景】
后端新增加了一个过滤器,用来处理前端请求中的session
若依赖存放过滤器的目录:RuoYi-Vue\ruoyi-framework\src\main\java\com\ruoyi\framework\security\filter\
【问题】
后端返回了一个状态码为403的错误,现在前端需要处理这个错误(跳转到登录首页)。
这是后端发送的ERROR
response.sendError(HttpServletResponse.SC_FORBIDDEN, "Forbidden");
前端页面接收到了
【解决】
在request.js
处理
在vue前端项目中找到request.js
目录:src\utils\request.js
在这里加上对错误码403的处理逻辑即可
这个根据若依这条句写的判断语句 message = "系统接口" + message.substr(message.length - 3) + "异常";
error => {
console.log('err' + error)
let { message } = error;
if (message == "Network Error") {
message = "后端接口连接异常";
} else if (message.includes("timeout")) {
message = "系统接口请求超时";
}else if ( message.substr(message.length - 3) === '403') {
message = "未登录或者登录状态已过期,请重新登录";
location.href = 'http://localhost:8000/login';
}else if (message.includes("Request failed with status code")) {
message = "系统接口" + message.substr(message.length - 3) + "异常";
}
ElMessage({ message: message, type: 'error', duration: 5 * 1000 })
return Promise.reject(error)
}
)
【解析这句的作用】message.substr(message.length - 3)
console.log('err' + error) //将错误打印可以看到是:`AxiosError`
let { message } = error; //从这个错误中拿到他的错误信息message
message.substr(message.length - 3) 是从字符串末尾提取最后三个字符的语句
逻辑为:
1、计算字符串的长度。
2、从倒数第三个字符开始提取子字符串。