【背景】
后端新增加了一个过滤器,用来处理前端请求中的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、从倒数第三个字符开始提取子字符串。