前端如何与springboot拦截器进行jwt的token校验，前后端代码实现

前端代码实现：

1. 登录成功后，将JWT Token存储在本地存储（LocalStorage）中：

localStorage.setItem('jwtToken', response.data.token);

2. 在每次请求后端接口时，将JWT Token携带在请求头中：

axios.defaults.headers.common['Authorization'] = 'Bearer ' + localStorage.getItem('jwtToken');
axios.get('/api/userInfo')
  .then(response => {
    // 处理响应数据
  })
  .catch(error => {
    // 处理错误信息
  });

3. 后端返回401 Unauthorized错误时，前端可以跳转到登录页重新登录：

axios.interceptors.response.use(
  response => response,
  error => {
    if (error.response.status === 401) {
      // 跳转到登录页
      window.location.href = '/login';
    }
    return Promise.reject(error);
  }
);

后端代码实现：

1. 编写JWT Token校验拦截器：

public class JwtInterceptor implements HandlerInterceptor {

    @Autowired
    private JwtUtil jwtUtil;

    @Override
    public boolean preHandle(HttpServletRequest request, HttpServletResponse response, Object handler)
            throws Exception {
        // 从请求头中获取JWT Token
        String token = request.getHeader("Authorization");
        if (token != null && token.startsWith("Bearer ")) {
            token = token.substring(7);
            // 校验JWT Token是否有效
            if (jwtUtil.validateToken(token)) {
                return true;
            }
        }
        // Token无效，返回401 Unauthorized错误
        response.setStatus(HttpServletResponse.SC_UNAUTHORIZED);
        return false;
    }

}

2. 将拦截器注册到拦截器链中：

@Configuration
public class WebConfig implements WebMvcConfigurer {

    @Autowired
    private JwtInterceptor jwtInterceptor;

    @Override
    public void addInterceptors(InterceptorRegistry registry) {
        registry.addInterceptor(jwtInterceptor)
                .addPathPatterns("/**") // 拦截所有请求
                .excludePathPatterns("/login"); // 排除登录请求
    }

}

3. 在Controller中处理请求：

@RestController
public class UserController {

    @GetMapping("/api/userInfo")
    public String getUserInfo() {
        // 处理请求
        return "User Info";
    }

}

需要注意的是，以上代码仅为示例代码，具体实现需要根据实际情况进行调整。同时，为了提高安全性，JWT Token需要设置过期时间，并定期更新Token。在前端实现JWT Token的校验时，可以使用axios等HTTP请求库来发送请求，并设置请求头中的Authorization字段。