vue +security 前后段分离权限管理小demo

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(