security+ vue 实现前后端分离权限
演示视频链接:
https://gulibuckets.oss-cn-shenzhen.aliyuncs.com/Action 2021-6-1 20-46-34.mp4?versionId=CAEQIxiBgICG8ceezhciIGYwOGFhNDRjYmJmZDQ3M2ZhNWNkODkxMWFjMmYwMjY3
gitee demo 地址 : https://gitee.com/wx_c3b99916a9/vue_security/tree/css/
第一步:跨域问题,
前后段分离,需要解决跨域 问题,像当前vue + security 解决:有以下会遇到的解决跨域的方法
第一: 使用 srping 注解 @CrossOrigin (只能解决本controller 控制器 , 或者 ,本方法跨域)
第二,全局跨域 需要写一个 过滤器 来继承 WebMvcConfigurer 接口,然后配合
@Configuration
public class CorsConfig implements WebMvcConfigurer {
private CorsConfiguration buildConfig() {
CorsConfiguration corsConfiguration = new CorsConfiguration();
corsConfiguration.addAllowedOrigin("*");
corsConfiguration.addAllowedHeader("*");
corsConfiguration.addAllowedMethod("*");
corsConfiguration.addExposedHeader("Authorization");
return corsConfiguration;
}
@Bean
public CorsFilter corsFilter() {
UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
source.registerCorsConfiguration("/**", buildConfig());
return new CorsFilter(source);
}
@Override
public void addCorsMappings(CorsRegistry registry) {
registry.addMapping("/**").allowedOriginPatterns("*")
.allowCredentials(true)
.allowedMethods("GET", "POST", "DELETE", "PUT")
.maxAge(3600);
}
}
第三: security 内置解决跨域 配置
public class CsrfSecurityRequestMatcher implements RequestMatcher {
private final Pattern allowedMethods = Pattern.compile("^(GET|HEAD|TRACE|OPTIONS)$");
//设置可以放过的请求
private final RegexRequestMatcher unprotectedMatcher = new RegexRequestMatcher("^/.*", null);
@Override
public boolean matches(HttpServletRequest request) {
if(allowedMethods.matcher(request.getMethod(