1.axios的后置拦截器
a.在登录拦截中响应json数据给前端,让前端去判断
//告诉前端我给你响应一个json格式的数据
response.setContentType("application/json");
//success=false,message=noLogin
response.getWriter().println("{\"success\":false,\"message\":\"noLogin\"}");
b.axios的后置拦截器
//axios的响应拦截器=后置拦截器【每次发送完axios请求之后,响应到前端最先经过他】
axios.interceptors.response.use(res => {
if(!res.data.success && res.data.message=="noLogin"){//后端想让你跳转到登录页面
router.push({ path: '/login' });
}
return res;
}, err => {
// 在请求错误时要做的事儿
// 该返回的数据则是axios.catch(err)中接收的数据
return Promise.reject(err)
});
2.路由拦截器
a.在AjaxResult中添加resultObj,并重写setter方法为链式语法
//保存任何数据类型的数据
private Object resultObj;
b.登录成功要将登录信息放在resultObj中,传会给前端
//1.前端可以判断是否登录过 //2.用于前端显示用户名
return AjaxResult.me().setResultObj(sysUser);
c.登录成功将用户信息和头像保存在localStorage
//用户前端显示用户名和头像
localStorage.setItem("userName",res.data.resultObj.userName);
localStorage.setItem("avatar",res.data.resultObj.avatar);
d.编写路由拦截器:拦截经过路由的请求。因为如果不写路由拦截器。有些请求是不发axios请求的,就拦截不到
//每次路由之前都要执行,每次请求都要经过路由
router.beforeEach((to, from, next) => {
if (to.path == '/login') {
next();
}else{
let userName = localStorage.getItem('userName');
if (userName) {
next();
} else {
next({path: '/login'});//跳转到login
}
}
})
===================================================================================================
后端拦截器Interceptor【1】,axios的前置拦截器【2】,axios的后置拦截器【3】,后端Controller处理器【4】,回调函数【5】