整体思路是这样，在首次登录成功的时候将用户id放在jwt中的payload中，利用JWT工具类生成相应的token，然后传给前端 ，前端将获得的token首先放在localStorage中，然后在前端设置请求拦截器，将localStorage中的token放在请求头中，这样就可以在每次访问的时候把token传递给后端，然后在后端设置拦截器，获得的请求头中的token数据，根据不同 的情况抛出不同的异常，没有异常放行。
拦截器代码如下
public class MyFilter implements HandlerInterceptor { @Autowired LoginMapper loginMapper; @Override public boolean preHandle(HttpServletRequest request, HttpServletResponse response, Object handler) throws Exception { String token=request.getHeader("token"); if(!(handler instanceof HandlerMethod)) return true; if(token==null) throw new Exception("无token,请重新登陆"); try { DecodedJWT decodedJWT = JwtUtil.decodeToken(token); Integer userId = decodedJWT.getClaim("userId").asInt(); System.out.println(userId); Login login = loginMapper.selectById(userId); if(login==null) throw new Exception("用户不存在"); } catch (Exception e){ throw new Exception("token验证失败"); } return true; } }
创建拦截器的配置类，这里使用@Bean注解进行配置，不能通过new 对象，因为Spring容器无法 对new出来的对象进行管理，在拦截器中使用了Spring注解，如果new 对象，则无法生效。这里对 拦截器和过滤器进行简单区别：
①拦截器是基于Java的反射机制的，而过滤器是基于函数回调。
②拦截器不依赖与servlet容器，过滤器依赖与servlet容器。
③拦截器只能对部分请求起作用，而过滤器则可以对几乎所有的请求起作用。
④拦截器可以访问spring容器上下文、值栈里的对象，而过滤器不能访问。
⑤在controller的生命周期中，拦截器可以多次被调用，而过滤器只能在容器初始化时被调用一次。
⑥拦截器可以获取IOC容器中的各个bean，而过滤器就不行，这点很重要，在拦截器里注入一个service，可以调用业务逻辑。
代码如下 ，首先拦截所有路径，然后放行登录界面，获取验证码后端接口
@Configuration public class InterceptorConfig implements WebMvcConfigurer { @Override public void addInterceptors(InterceptorRegistry registry) { registry.addInterceptor(myFilter()) .addPathPatterns("/**") .excludePathPatterns("/login","/login/getcode"); } @Bean public MyFilter myFilter(){ return new MyFilter(); } }
前端 请求拦截器代码如下，其余的代码相对简单进行省略。
const request = axios.create({ baseURL: 'http://localhost:8080', // 注意！！ 这里是全局统一加上了 '/api' 前缀，也就是说所有接口都会加上'/api'前缀在，页面里面写接口的时候就不要加 '/api'了，否则会出现2个'/api'，类似 '/api/api/user'这样的报错，切记！！！ timeout: 5000 }) request.interceptors.request.use(config=>{ config.headers['Content-Type']="application/json;charset=utf-8" let token=localStorage.getItem("userId")?localStorage.getItem("userId"):null if(token){ config.headers['token']=token } return config },error => { return Promise.reject(error) })
