前后端分离项目解决跨域并且前端登录成功后header自动带上token

原创已于 2022-04-01 22:56:31 修改 · 1.3k 阅读

4 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#java #intellij-idea #服务器

于 2022-04-01 22:52:03 首次发布

前端专栏收录该内容

4 篇文章

订阅专栏

本文介绍了如何实现一个Spring Boot应用中的Token验证拦截器，确保只有登录用户才能访问资源，并处理跨域请求。同时展示了MVC配置如何放行特定接口和启用全局跨域策略。

验证是否登录的处理拦截器

@Component
public class TokenInterceptor implements HandlerInterceptor {
	@Override
	public boolean preHandle(HttpServletRequest request, HttpServletResponse response, Object handler) throws Exception {
		response.setHeader("Access-Control-Allow-Origin", "*");
		response.setHeader("Access-Control-Allow-Headers","*");
		response.setHeader("Access-Control-Allow-Methods","*");
		response.setHeader("Access-Control-Allow-Credentials","true");
		response.setHeader("Access-Control-Max-Age","3600");
		//在请求头中获取token
		String token = request.getHeader("token");
		System.out.println("获取的token是:"+token);
		if(token==null){
			throw new KuException(20004, "请进行登录");
		}
		//判断是否过期
		boolean b = JwtUtils.checkToken(token);
		if(b){
			//System.out.println("获取会员的id是"+JwtUtils.getMemberIdByJwtToken(request));
			return true;
		}
		return false;
	}

}

mvc配置(放行登录接口和swagger，且全局解决跨域问题)

@Configuration
public class MvcConfig implements WebMvcConfigurer {
	@Autowired
	private TokenInterceptor tokenInterceptor;
	@Override
	public void addInterceptors(InterceptorRegistry registry) {
		InterceptorRegistration interceptor = registry.addInterceptor(tokenInterceptor);
		interceptor.addPathPatterns("/**")
				.excludePathPatterns("/user/**")
				.excludePathPatterns("/doc.html/**")
				.excludePathPatterns("swagger/**")
				.excludePathPatterns("/swagger-ui.html")
				.excludePathPatterns("swagger-ui.html")
				.excludePathPatterns("/webjars/**")
				.excludePathPatterns("/swagger-ui.html/*")
				.excludePathPatterns("/swagger-resources")
				.excludePathPatterns("/swagger-resources/**")
				.excludePathPatterns("/v2/**");

	}
	@Override
	public void addCorsMappings(CorsRegistry registry) {
		//本应用的所有方法都会去处理跨域请求
		registry.addMapping("/**")
				//允许远端访问的域名
				.allowedOrigins("*")
				//允许请求的方法("POST", "GET", "PUT", "OPTIONS", "DELETE")
				.allowedMethods("*")
				//允许请求头
				.allowedHeaders("*");
	}

sagger登陆测试(获取token)

在这里插入图片描述

随便访问接口(不带上token)

在这里插入图片描述

访问接口带上token

在这里插入图片描述

前端的登录组件(我这里是写死的，方便测试登录成功后，用会话保存后端传来的token)

在这里插入图片描述

request.js编写拦截器(每个请求都从会话中获取token)

//创建默认实列
const instance=axios.create({
  baseURL:'http://localhost:1000',
  timeout:5000,
})

instance.interceptors.request.use(
  config => {
    if (window.sessionStorage.getItem('token')) {  // 判断是否存在token，如果存在的话，则每个http header都加上token
      config.headers.token = sessionStorage.getItem('token');
      console.log("嘿嘿"+config.headers.token)
    }
    return config;
  },
  err => {
    return Promise.reject(err);
  });

在这里插入图片描述