스프링 보안을 사용하여 특정 React Hash Routes에 액세스를 허용하려면 어떻게해야합니까?

Question

인증되지 않은 사용자가 Reactjs 단일 페이지 응용 프로그램의 모든 경로에 액세스하지 못하도록 제한하려고합니다. 우리는 HashRouter를 사용하여 UI 측에서 라우팅을 처리하므로, 우리의 URL은 http://localhost/app/#/Home, http://localhost/app/#/Login과 같이 보입니다. 우리는 JWT와 함께 Spring Security OAuth2를 사용하고 있습니다.

/app/#/Login,/app/#/Home 등과 달리 모든 요청은/app /로 제공됩니다. 클라이언트가 올바른 경로를 렌더링하지만 응용 프로그램의 보안을 유지하는 데 문제가 발생합니다. 로그인 경로에 대한 액세스를 허용하려면 모든 것을 열어주는 Spring Security에서/app /에 대한 액세스를 허용해야합니다.

스프링 보안에서 React Hash Route를 보호 할 수 있습니까, 아니면 라우터의 UI 측에서 처리해야합니까? 기타 모든 요청에 ​​대한 모든

@EnableWebSecurity(debug = true) 
@Configuration 
@Order(Ordered.HIGHEST_PRECEDENCE + 1) 
public class LoginConfig extends WebSecurityConfigurerAdapter { 

    @Override 
    public void configure(HttpSecurity http) throws Exception { 
     http 
       .antMatcher("/app/**") 
       .httpBasic().disable() 
       .formLogin().disable() 
       .authorizeRequests() 
       .antMatchers(HttpMethod.OPTIONS).permitAll() 
       .antMatchers(HttpMethod.GET, "/favicon.ico").permitAll() 
       .antMatchers("/app/**").permitAll() 
       .anyRequest().authenticated() 
     ; 
    } 
} 

기본 구성으로

로그인 구성은

@EnableWebSecurity(debug = true) 
@Configuration 
@Order(Ordered.HIGHEST_PRECEDENCE + 1) 
public class LoginConfig extends WebSecurityConfigurerAdapter { 

    @Override 
    public void configure(HttpSecurity http) throws Exception { 
     http 
       .antMatcher("/app/#/login") 
       .httpBasic().disable() 
       .formLogin().disable() 
       .authorizeRequests() 
       .antMatchers(HttpMethod.OPTIONS).permitAll() 
       .antMatchers(HttpMethod.GET, "/favicon.ico").permitAll() 
       .antMatchers("/app/#/login").permitAll() 
       .anyRequest().authenticated() 
     ; 
    } 
} 

로그인 구성 보조금 액세스

@EnableWebSecurity(debug = true) 
@Configuration 
@Order(2) 
public class SecurityConfig extends WebSecurityConfigurerAdapter { 
    @Override 
    public void configure(HttpSecurity http) throws Exception { 
     http 
       .httpBasic().disable() 
       .formLogin().disable() 
       .csrf().disable() 
       .authorizeRequests() 
       .antMatchers(HttpMethod.OPTIONS).permitAll() 
       .antMatchers(HttpMethod.GET, "/**/favicon.ico").permitAll() 
       .antMatchers(HttpMethod.POST, "/oa/oauth/token").permitAll() 
       .anyRequest().authenticated() 
     ; 
    } 
} 

,536,

미리 감사드립니다!

Answer 1

수 없습니다. SPA를 구축 할 때 "페이지"또는 "SPA 경로"를 보호하는 대신 SPA가 액세스하는 API 끝점을 보안하기 위해 보안 초점을 전환합니다. 따라서 SPA에 데이터와 기능을 제공하는 서버 끝점을 보호하십시오. 사용자가 대신 경로 /app/#Admin을 차단하려는의 "관리"기능에 액세스 할 수없는 경우

예를 들어, 당신이 있는지 확인하고 모든 관리 관련 API를 엔드 포인트 블록 (같은 /api/admin, /api/adduser, ...).

그렇다고해서 도에 금지 링크를 숨기거나 사용자가 해당 경로를 방문하지 못하도록 코드가 있어야합니다. 더 나은 사용자 환경을 제공해야하기 때문입니다. SPA에서 루트를 숨기는 것은 보안이 아닌 UX에만 해당된다는 것을 알고 있습니다. 보안은 API를 보호하여 처리됩니다.