18.前端拦截器和后端拦截器

前后端交互流程图

后端拦截器参考代码

public class TokenIntercept implements HandlerInterceptor {
    @Override
    public boolean preHandle(HttpServletRequest request, HttpServletResponse response, Object handler) throws Exception {


        //检查你的token的合法性
        String token = request.getHeader("token");
        Boolean flag = TokenUtils.validateToken(token);

        if(flag){
            return true;
        }else{
            PrintWriter writer = response.getWriter();


            writer.write(JSON.toJSONString(ResultVo.reject("token不合法")));

            writer.close();
            writer.flush();
            return false;
        }
    }

注册拦截器，让拦截器生效

@Configuration
public class WebConfig implements WebMvcConfigurer {

    @Override
    public void addInterceptors(InterceptorRegistry registry) {
        registry.addInterceptor(new MyInterceptor())
        .addPathPatterns("/**") // 添加拦截路径，这里表示拦截所有路径
        .excludePathPatterns("/login", "/resources/**"); // 排除拦截路径，这里表示不拦截登录和静态资源
    }
}

注意上传的图片显示不出来的话，要在拦截器放行

.excludePathPatterns("/**/*.jpg") // 排除.jpg文件
.excludePathPatterns("/**/*.jpeg") // 排除.jpeg文件
.excludePathPatterns("/**/*.png") // 排除.png文件
.excludePathPatterns("/**/*.gif") // 排除.gif文件
.excludePathPatterns("/**/*.bmp") // 排除.bmp文件
.excludePathPatterns("/**/*.webp"); // 排除.webp文件

前端请求拦截器

主要就是让请求头携带 token 令牌

_axios.interceptors.request.use(
  function(config) {
    // Do something before request is sent

    //向请求头放 token  这个操作每个发送axios都要操作的

    var token = sessionStorage.getItem("token");

    if(token){
      config.headers['token']=token
    }
    return config;
  },
  function(error) {
    // Do something with request error
    return Promise.reject(error);
  }
);

前端响应拦截器

主要就是为了，发现 token 有问题的时候直接转发到登录页

还可以统一处理结果返回，错误提示这些就非常方便了。

// Add a response interceptor
_axios.interceptors.response.use(
    function(response) {
        // Do something with response data

        if(response.data.code == 3000){

            MessageBox.confirm(response.data.mess,"系统提示",{
                confirmButtonText:'重新登录',
                cancelButtonText:'取消',
                type:'warning'

            }

            ).then(()=>{
                location.href="/";

            })
            // 阻止进一步链式调用 没提示任何信息 不走then
            return new Promise(() => {});

        }else if(response.data.code==5000){
            Message.error(response.data.mess)
            // 阻止进一步链式调用 没提示任何信息    不走then
            return new Promise(() => {});
        }else{
            //要走 then
            return response.data;


        }

    },
    function(error) {
        // Do something with response error
        return Promise.reject(error);
    }
);