Axios后置拦截器和路由拦截器

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】

猜你喜欢

转载自blog.csdn.net/lzc19991201/article/details/130744588