拦截器 基本实现方法 Java 前后端分离 商城登陆 （前端vue+axois+localStorage后端springboot）

一.业务逻辑：

1.后端拦截

a.无条件放行登陆、注册、上传图片、商铺入住等一般在未登陆状态下操作的请求

b.拦截所有未携带令牌（U-TOKEN）的请求，所有被拦截下来的请求应发送json统一要求页面跳转到登陆页面

2.前端拦截

a.后置拦截器，接受后端传来的json字符串，并把对应的页面跳转到登陆页面

b.前置拦截器，如果存在令牌，那么就在所有发出的请求的请求体内加上令牌

二.后端拦截实现

1.实现方法

写一个拦截器类实现HandlerInterceptor类的接口，重写其preHandler方法，给此类打上@Component标签，交给spring管理

再写一个配置类实现WebMvcConfigurer类的接口，添加刚刚我们写好的拦截器，打上@Configuration标签声明为配置类

2.实例代码

拦截器类LoginInterceptor

import cn.itsource.basic.util.RedisUtils;
import org.apache.commons.lang3.StringUtils;
import org.springframework.stereotype.Component;
import org.springframework.web.servlet.HandlerInterceptor;

import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.io.PrintWriter;
import java.util.Arrays;
import java.util.List;

@Component
public class LoginInterceptor implements HandlerInterceptor{
    @Override
    public boolean preHandle(HttpServletRequest request, HttpServletResponse response, Object handler) {
        String uri = request.getRequestURI();
        //添加无条件放行列表用户登录，注册，商铺入驻，上传图片
        List allowList = Arrays.asList("/user/login","/register","/shop/settledIn","/fastDfs");
        if (allowList.contains(uri)){
            return true;
        }
        /**以下实现逻辑：
         * 1.根据令牌放行
         * 先判断有没有令牌，再判断令牌在redis里面存不存在
         * 如果存在就放行然后刷新令牌时间
         */
        //1 判断请求头里面是否携带U-TOKEN如果没有携带返回没有用户的错误
        String uToken = request.getHeader("U-TOKEN");
        if(StringUtils.isBlank(uToken)){
            writeNoUserError(response);
            return false;
        }
        //2判断redis中是否可以获取U-TOKEN，如果获取不到则返回没有用户的错误
        String user = RedisUtils.INSTANCE.get(uToken);
        if( StringUtils.isBlank(user)){
            writeNoUserError(response);
            return false;
        }
        //3把token放入reids中//每一次访问都会刷新一次//这样用户在一次访问中就可以一直放行
        RedisUtils.INSTANCE.set(uToken,user,30*60);//过期时间30分钟
        return true;
    }


    private void writeNoUserError(HttpServletResponse response) {
        PrintWriter writer = null;
        try {
            response.setContentType("application/json; charset=utf-8"); // json方式放回
            writer = response.getWriter();
            writer.write("{\"success\":false,\"message\":\"noUser\"}");
        } catch (IOException e) {
            e.printStackTrace();
        }finally {
            if (writer != null) {
                writer.close();
            }
        }
    }
}

配置类WebConfigurer

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.InterceptorRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;

@Configuration
public class WebConfigurer implements WebMvcConfigurer {
    @Autowired//装配一个我们刚刚写好的拦截器类
    private LoginInterceptor loginInterceptor;
    //添加拦截器
    @Override
    public void addInterceptors(InterceptorRegistry registry) {
        registry.addInterceptor(loginInterceptor);
    }
}

三.前台拦截实现

1.后置拦截器

使用axios后置拦截器，处理后台传来的没有登录的响应（axios的interceptors方法中处理response方法）

axios.interceptors.response.use(result=>{
    let data = result.data;
    if(!data.success && data.message==="noUser")
        location.href = "/login.html";//跳转到首页
    return result;
},error => {
    Promise.reject(error);
});

2.前置拦截器

axios后置拦截器，实现每个发出的请求都携带token的功能（axios的interceptors方法中处理request方法）

axois.interceptors.request.use(config=>{
   //取出token
   let uToken = localStorage.getItem("uToken");
   //如果不为空
   if(!uToken){
       config.headers['U-TOKEN']=uToken;//注意格式
   }
   return config;
},error => {
    Promise.reject(error);
});

另：前台默认所有的请求都通过axios发送，需要把axois配置给vue

//把axois绑定给vue
Vue.prototype.$http=axios;