拦截器 | Axios中文文档 | Axios中文网https://www.axios-http.cn/docs/interceptors
一,统一规范
@Data
@AllArgsConstructor
@NoArgsConstructor
public class Result<T> {
/*编码*/
private Integer code=200;
/*消息*/
private String msg="操作成功";
/*具体的数据*/
private T t;
/*成功的静态方法*/
public static <T> Result success(T t){
return new Result<>(200,"操作成功",t);
}
public static <T> Result fail(){
return new Result<>(500,"操作失败",null);
}
public static <T> Result forbidden(){
return new Result<>(403,"权限不允许",null);
}
}
弄好之后去访问前端他就报错了
这里他是说没有数据
去前端看一下请求的数据
发现数据全在 t 里
把 t 加上就不报错了
二.响应拦截器
在前端的main.js里面修改
这里面有axios和拦截器
return response.data.t; 这个地方是res响应的数据路径在这里写
import axios from "axios";
// 后端项目的时候 http://localhost:8899
// axios设置一个默认的路径
// 创建实例时配置默认值
const instance = axios.create({
// 访问路径的时候假的一个基础的路径
baseURL: 'http://localhost:8080/'
});
// 添加响应拦截器
instance.interceptors.response.use( response=> {
// 状态码 500
if(response.data.code==500){
// 跳转到 login 组件里面
myrouter.push({path:"/login"});
return;
}
// 数据 直接返回给axios
return response.data.t;
}, error=> {
// 超出 2xx 范围的状态码都会触发该函数。
// 对响应错误做点什么
return Promise.reject(error);
});
// 起一个名字注册到vue 里面
// Vue. prototype.名字 = axios
Vue.prototype.$axios = instance;
跳转更改路径
三.路由拦截器
在全局变量里加入
localStorage.getItem 是获取当前存储的值与存储的值不一致不让登陆