Spring Boot+Vue+Spring Security OAuth2的前后端分离项目实现研究

淡淡的烟草味﹌ 2022-02-03 15:39 991阅读 0赞

业余在开发一个Spring Boot+Vue+Spring Security OAuth2的一个前后端分离项目，其中遇到不少如跨域、OPTIONS请求处理、PreAuthorize注解无效、Token失效处理等问题，记录如下。

在此项目中，资源服务与授权服务在同一应用中，使用端口8081；前端应用使用端口8080。前端使用axios进行ajax调用。  
关于Spring Security OAuth2相关内容，可参考：[http://liumoran.cn/topic/detail?id=1][http_liumoran.cn_topic_detail_id_1]

# 1. 后端处理跨域请求问题 #

如果前后端部署在不同应用服务器上，后端需要配置跨域访问才成。如未配置跨域访问，浏览器F12打开高度页面的Console界面中，可以看到以下信息：

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://localhost:8081/getLoginUser. (Reason: CORS header ‘Access-Control-Allow-Origin’ missing)

Spring Boot中配置跨域请求，可以通过定义Filter的方式实现：

@Component
    public class MyCorsFilter implements Filter { 
        @Override
        public void doFilter(ServletRequest req, ServletResponse res, FilterChain chain) throws IOException, ServletException { 
            HttpServletResponse response = (HttpServletResponse) res;
    
            response.setHeader("Access-Control-Allow-Origin","http://localhost:8080");
            response.setHeader("Access-Control-Allow-Credentials", "true");
            response.setHeader("Access-Control-Allow-Methods", "POST, GET, PATCH, DELETE, PUT, OPTIONS");
            response.setHeader("Access-Control-Max-Age", "3600");
            response.setHeader("Access-Control-Allow-Headers", "Content-Type, x-requested-with, X-Custom-Header, Authorization");
            chain.doFilter(req, res);
        }
    
        @Override
        public void init(FilterConfig filterConfig) { }
    
        @Override
        public void destroy() { }
    
    }

# 2. OPTIONS报401问题 #

**为什么在正常的请求前要发送OPTIONS请求？**

用户登录成功后，当前端往后端发送的请求中包含有Authorization头，并且是跨域请求时，浏览器将会往后端发送对应的OPTIONS请求，以确认后台服务是否支持对受保护资源的跨域访问。

由于OPTIONS请求中并不带有Token，因此请求被Spring Security OAuth2拦截到后，检查发现没有Token，直接返回401给前端页面了。

**如何配置？**

可以在Spring Security的配置类中配置允许所有OPTIONS请求访问，如下所示：

@Override
        public void configure(HttpSecurity http) throws Exception { 
            http
                    .anonymous()
                    .and()
                    .authorizeRequests()
                    .antMatchers(HttpMethod.OPTIONS, "**").permitAll()
                    .anyRequest().authenticated();
        }

其中省略掉了其它的资源访问授权配置。

但在配置后前端访问仍旧报401！！经过排查，按前面所说，我是在Spring Security的配置类中添加这个配置的，但实际上，资源服务器中对请求是否有权限访问的处理，是在资源服务器的配置中进行的，因此在单独的Spring Security配置类中进行配置并不会生效！必须在继承自ResourceServerConfigurerAdapter的配置类中进行该项配置。

在资源服务中，实际上是不需要单独的Spring Security的配置类的，直接使用ResourceServerConfigurerAdapter即可完成对各类资源的授权配置。此时的配置类如下：

@Configuration
    @EnableGlobalMethodSecurity(prePostEnabled = true)
    public class SecurityConfigurer extends ResourceServerConfigurerAdapter { 
        @Autowired
        private RealAuthenticationProvider authenticationProvider;
    
        @Override
        public void configure(ResourceServerSecurityConfigurer resources) throws Exception { 
            resources.resourceId("testResource")
                    .stateless(true);
        }
    
        @Override
        public void configure(HttpSecurity http) throws Exception { 
            http
                    .authorizeRequests()
                        .antMatchers(HttpMethod.OPTIONS, "**").permitAll()
                        .antMatchers("/*", "/css/**/*", "/js/**/*", "/icons/**/*", "/upload/*",
                                "/h2-console/", "/h2-console/**/*", "/topic/**/*").permitAll()
                        .anyRequest().authenticated()
                    .and()
                    .formLogin()
                        .loginPage("/login")
                        .loginProcessingUrl("/iLogin")
                        .permitAll()
                    .and().logout().logoutUrl("/logout").logoutSuccessUrl("/")
    // .and().sessionManagement().invalidSessionUrl("/timeout")
                    .and().cors();
            http.headers().frameOptions().sameOrigin().httpStrictTransportSecurity().disable();
        }
    
        @Bean
        public static NoOpPasswordEncoder passwordEncoder() { 
            return (NoOpPasswordEncoder) NoOpPasswordEncoder.getInstance();
        }
    
        @Autowired
        public void configureGlobal(AuthenticationManagerBuilder auth) throws Exception { 
            auth.authenticationProvider(authenticationProvider);
        }
    }

# 3. 资源服务器中使用PreAuthorize无效问题 #

个人习惯使用PreAuthorize注解来对需要控制权限的方法进行保护。但在资源服务器中，配置了EnableGlobalMethodSecurity后，发现这个注解仍旧是未生效状态。猜测原因应该是这个注解在Spring Security的上下文中生效，但在Spring Security OAuth2的上下文中并未生效。具体原因留待后续再研究。

通过在ResourceConfigurer类中添加自定义的Voter可以解决这个问题：

http.authorizeRequests().withObjectPostProcessor(new ObjectPostProcessor<AffirmativeBased>() {
        @Override
        public <O extends AffirmativeBased> O postProcess(O object) {
            object.getDecisionVoters().add(appVoter);
            return object;
        }
    });

其中，自定义Voter实现如下：

@Component
    public class AppVoter implements AccessDecisionVoter { 
        @Resource
        private RequestMappingHandlerMapping requestMappingHandlerMapping;
    
        @Override
        public boolean supports(ConfigAttribute attribute) { 
            return true;
        }
        
        @Override
        public int vote(Authentication authentication, Object object, Collection collection) { 
            WebExpressionVoter webExpressionVoter = new WebExpressionVoter();
            webExpressionVoter.setExpressionHandler(new DefaultWebSecurityExpressionHandler());
    
            FilterInvocation invocation = (FilterInvocation) object;
            List<ConfigAttribute> configAttributes = getAttributes(invocation);
            if (0 == configAttributes.size()) { 
                return ACCESS_GRANTED;
            }
            return webExpressionVoter.vote(authentication, invocation, configAttributes);
        }
    
        public List<ConfigAttribute> getAttributes(FilterInvocation invocation) { 
            try { 
                HandlerExecutionChain handlerExecutionChain = requestMappingHandlerMapping.getHandler(invocation.getRequest());
                HandlerMethod handlerMethod = (HandlerMethod) handlerExecutionChain.getHandler();
                if (!handlerMethod.getBeanType().isAnnotationPresent(PreAuthorize.class)
                        && !handlerMethod.getMethod().isAnnotationPresent(PreAuthorize.class)) { 
                    return new ArrayList<>(0);
                }
    
                List<ConfigAttribute> configAttributes = new ArrayList<>(16);
                PreAuthorize preAuthorize = handlerMethod.getBeanType().getAnnotation(PreAuthorize.class);
                if (null != preAuthorize) { 
                    String str = preAuthorize.value();
                    ConfigAttribute configAttribute = new SecurityConfig(str);
                    configAttributes.add(configAttribute);
                }
    
                preAuthorize = handlerMethod.getMethod().getAnnotation(PreAuthorize.class);
                if (null != preAuthorize) { 
                    String str = preAuthorize.value();
                    ConfigAttribute configAttribute = new SecurityConfig(str);
                    configAttributes.add(configAttribute);
                }
    
                return configAttributes;
            } catch (Exception e) { 
                e.printStackTrace();
                return new ArrayList<>(0);
            }
        }
        
        @Override
        public boolean supports(Class clazz) { 
            return clazz.equals(FilterInvocation.class);
        }
    }

此时资源服务器的配置类如下：

@Configuration
    @EnableGlobalMethodSecurity(prePostEnabled = true)
    public class SecurityConfigurer extends ResourceServerConfigurerAdapter { 
        @Autowired
        private RealAuthenticationProvider authenticationProvider;
    
        @Resource
        private AppVoter appVoter;
    
        @Override
        public void configure(ResourceServerSecurityConfigurer resources) throws Exception { 
            resources.resourceId("testResource")
                    .stateless(true);
        }
    
        @Override
        public void configure(HttpSecurity http) throws Exception { 
            http
                    .authorizeRequests()
                        .antMatchers(HttpMethod.OPTIONS, "**").permitAll()
                        .antMatchers("/*", "/css/**/*", "/js/**/*", "/icons/**/*", "/upload/*",
                                "/h2-console/", "/h2-console/**/*", "/topic/**/*").permitAll()
                        .anyRequest().authenticated()
                    .and()
                    .formLogin()
                        .loginPage("/login")
                        .loginProcessingUrl("/iLogin")
                        .permitAll()
                    .and().logout().logoutUrl("/logout").logoutSuccessUrl("/")
    // .and().sessionManagement().invalidSessionUrl("/timeout")
                    .and().cors();
            http.headers().frameOptions().sameOrigin().httpStrictTransportSecurity().disable();
            http.authorizeRequests().withObjectPostProcessor(new ObjectPostProcessor<AffirmativeBased>() { 
                @Override
                public <O extends AffirmativeBased> O postProcess(O object) { 
                    object.getDecisionVoters().add(appVoter);
                    return object;
                }
            });
        }
    
        @Bean
        public static NoOpPasswordEncoder passwordEncoder() { 
            return (NoOpPasswordEncoder) NoOpPasswordEncoder.getInstance();
        }
    
        @Autowired
        public void configureGlobal(AuthenticationManagerBuilder auth) throws Exception { 
            auth.authenticationProvider(authenticationProvider);
        }
    }

通过引入以上Voter，即可使用PreAuthorize注解生效。

# 4. Token失效时跳到登录页面处理 #

Token失效后，后端将会返回401错误给前端。此时后端是在OAuth2AuthenticationProcessingFilter这个Filter中处理的，后续的所有Filter包括第一步中所定义的MyCorsFilter也未执行，因此此时返回给前端的报文头中并不包含有跨域相关头信息，前端处理返回时获取不到异常码！

很明显，需要想办法使得MyCorsFilter在OAuth2AuthenticationProcessingFilter之前执行。因此需要修改资源服务器配置，添加以下处理：

http.addFilterBefore(myCorsFilter, WebAsyncManagerIntegrationFilter.class);

此后前端即可通过判断返回的处理码及错误消息来判断是否是Token失效了，如果发现是Token失效，则移除缓存的Token并跳转到登录页面，处理如下：

// 返回数据统一处理
    Axios.interceptors.response.use(
      response => { 
        ...
      },
      error => { 
        console.error(error)
        let statusCode = error.response.status
        if (statusCode === 401 && error.response.data.error === 'invalid_token') { 
          // Token失效
          console.log('invalid_token')
          window.localStorage.removeItem('accessToken')
          store.dispatch('updateLoginUser')
          router.push('/login')
        }
        return Promise.reject(error)
      }
    )

# 5. 完整配置 #

最终，完整的资源服务的配置类如下所示：

@Configuration
    @EnableGlobalMethodSecurity(prePostEnabled = true)
    public class SecurityConfigurer extends ResourceServerConfigurerAdapter { 
        @Autowired
        private RealAuthenticationProvider authenticationProvider;
    
        @Resource
        private AppVoter appVoter;
    
        @Resource
        private MyCorsFilter myCorsFilter;
    
        @Override
        public void configure(ResourceServerSecurityConfigurer resources) throws Exception { 
            resources.resourceId("testResource")
                    .stateless(true);
        }
    
        @Override
        public void configure(HttpSecurity http) throws Exception { 
            http
                    .authorizeRequests()
                        .antMatchers(HttpMethod.OPTIONS, "**").permitAll()
                        .antMatchers("/*", "/css/**/*", "/js/**/*", "/icons/**/*", "/upload/*",
                                "/h2-console/", "/h2-console/**/*", "/topic/**/*").permitAll()
                        .anyRequest().authenticated()
                    .and()
                    .formLogin()
                        .loginPage("/login")
                        .loginProcessingUrl("/iLogin")
                        .permitAll()
                    .and().logout().logoutUrl("/logout").logoutSuccessUrl("/")
    // .and().sessionManagement().invalidSessionUrl("/timeout")
                    .and().cors();
            http.headers().frameOptions().sameOrigin().httpStrictTransportSecurity().disable();
            http.authorizeRequests().withObjectPostProcessor(new ObjectPostProcessor<AffirmativeBased>() { 
                @Override
                public <O extends AffirmativeBased> O postProcess(O object) { 
                    object.getDecisionVoters().add(appVoter);
                    return object;
                }
            });
    
            http.addFilterBefore(myCorsFilter, WebAsyncManagerIntegrationFilter.class);
        }
    
        @Bean
        public static NoOpPasswordEncoder passwordEncoder() { 
            return (NoOpPasswordEncoder) NoOpPasswordEncoder.getInstance();
        }
    
        @Autowired
        public void configureGlobal(AuthenticationManagerBuilder auth) throws Exception { 
            auth.authenticationProvider(authenticationProvider);
        }
    }

授权服务的配置如下：（与资源服务在同一服务中）

@Configuration
    public class AuthenticationConfiguration extends AuthorizationServerConfigurerAdapter { 
        @Resource
        private RealAuthenticationProvider realAuthenticationProvider;
    
        @Override
        public void configure(ClientDetailsServiceConfigurer clients) throws Exception { 
            clients.inMemory()
                    .withClient("codelife")
                    .resourceIds("testResource")
                    .authorizedGrantTypes("password")
                    .authorities("ROLE_CLIENT")
                    .scopes("read", "write")
                    .secret("secret")
                    .redirectUris("http://localhost:8080");
        }
    
        @Override
        public void configure(AuthorizationServerSecurityConfigurer security) throws Exception { 
            security.tokenKeyAccess("permitAll()")
                    .checkTokenAccess("hasAuthority('ROLE_CLIENT')")
                    .allowFormAuthenticationForClients();
        }
    
        @Override
        public void configure(AuthorizationServerEndpointsConfigurer endpoints) throws Exception { 
            endpoints.authenticationManager(authentication -> realAuthenticationProvider.authenticate(authentication));
        }
    
    }

[http_liumoran.cn_topic_detail_id_1]: http://liumoran.cn/topic/detail?id=1