Spring微服务ReactJS单点登录

Question

我正在使用spring-cloud-netflix在我的项目中使用微服务架构应用程序进行单点登录实现。目前，我已经完成了OAuth2服务和网关服务。

以下是我的网关安全配置：

/**
 * SSO security config.
 */
@Configuration
@EnableZuulProxy
@EnableOAuth2Sso
@EnableWebSecurity
public class SsoSecurityConfig extends WebSecurityConfigurerAdapter {

    @Autowired
    private OAuth2ClientAuthenticationProcessingFilter ssoFilter;
    @Autowired
    private AuthenticationEntryPoint authenticationEntryPoint;
    @Autowired
    private SsoLogoutSuccessHandler logoutSuccessHandler;

    /**
     * SSO http config.
     *
     * @param http configurer
     * @throws Exception exception
     */
    @Override
    public void configure(HttpSecurity http) throws Exception {
        http
//                .cors().and()
                .csrf().disable()
                .authorizeRequests()
                .antMatchers("/", "/test", "/favicon.ico", "/sockjs-node/**", "/static/**", "/*.js", "/*.jpg",
                        "/rest/**", "/uaa/**", "/backend/**",
                        "/users/**", "/files/**", "/roles/**").permitAll()
                .anyRequest().authenticated().and()
//                .exceptionHandling().authenticationEntryPoint(authenticationEntryPoint).and()
                .logout().logoutSuccessHandler(logoutSuccessHandler)
                .and()
                .sessionManagement().maximumSessions(1)
                .expiredUrl("/")
                .maxSessionsPreventsLogin(false);
//        http.addFilterAfter(ssoFilter, BasicAuthenticationFilter.class);

    }

    /**
     * OAuth2 config.
     */
    @Configuration
    protected static class OAuth2Config {

        @Bean
        public OAuth2ClientAuthenticationProcessingFilter ssoFilter(
                SsoLoginSuccessHandler ssoLoginSuccessHandler,
                OAuth2ClientContext beaconOAuth2ClientContext,
                RemoteTokenServices remoteTokenServices,
                OAuth2ProtectedResourceDetails resourceDetails) {
            OAuth2ClientAuthenticationProcessingFilter filter =
                    new OAuth2ClientAuthenticationProcessingFilter("/login");
            filter.setRestTemplate(new OAuth2RestTemplate(resourceDetails,
                    beaconOAuth2ClientContext));
            filter.setTokenServices(remoteTokenServices);
//            filter.setAuthenticationSuccessHandler(new SavedRequestAwareAuthenticationSuccessHandler());
            return filter;
        }
//
//        @Bean
//        public CorsConfigurationSource corsConfigurationSource() {
//            final CorsConfiguration configuration = new CorsConfiguration();
//            configuration.setAllowedOrigins(ImmutableList.of("*"));
//            configuration.setAllowedMethods(ImmutableList.of("HEAD",
//                    "GET", "POST", "PUT", "DELETE", "PATCH", "OPTIONS"));
//            configuration.setAllowCredentials(true);
//            configuration.setAllowedHeaders(
//                    ImmutableList.of("Authorization", "Cache-Control", "Content-Type"));
//            final UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
//            source.registerCorsConfiguration("/**", configuration);
//            return source;
//        }

    }

}

网关yaml配置

security:
  oauth2:
    client:
      preEstablishedRedirectUri: http://localhost:3000/login
      registeredRedirectUri: http://localhost:3000/login
      accessTokenUri: http://localhost:10035/uaa/oauth/token
      userAuthorizationUri: http://localhost:10035/uaa/oauth/authorize
      clientId: react_app
      clientSecret: react_app_secret
      useCurrentUri: true
    resource:
      tokenInfoUri: http://localhost:10035/uaa/oauth/check_token

我有点困惑，如果运行在不同的端口(webpack开发服务器，端口3000)上，我应该如何授权react应用客户端？

Answer 1

另一种方法是使用webpack设置代理，例如，在您的webpack配置中添加代理，如下所示：

devServer: {
  contentBase: '/static',
  historyApiFallback: true,
  port: 3000,
  compress: false,
  inline: false,
  hot: true,
  host: '0.0.0.0',
  proxy: {
    '/api': { // <---- Intercept all calls to `/api`
      target: 'http://localhost:8080', // <--- Your API server in a different port
      changeOrigin: true,
      secure: false,
    },
  },
},

前面的配置设置了一个代理，因此每当有对/api的请求时，它都会将请求代理到在另一个端口上运行的服务器。