Spring Securityを使用して特定のReact Hashルートにアクセスするにはどうすればよいですか？

Question

Reactjsシングルページアプリケーション内のどのルートにも認証されていないユーザーがアクセスするのを制限しようとしています。我々は、UI側のルーティングを処理するためにHashRouterを使用しているので、我々のURLはhttp://localhost/app/#/Home、http://localhost/app/#/Loginのようになります。JWTでSpring Security OAuth2を使用しています。

/app /＃/ Login、/ app /＃/ Homeなどとは異なり、すべてのリクエストは/ app /として入力されます。クライアントは正しいルートをレンダリングしますが、アプリケーションを保護しようとすると問題が発生します。ログインルートへのアクセスを許可するには、すべてを開く、Spring Securityの/ app /へのアクセスを許可する必要があります。

Spring Securityで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() 
     ; 
    } 
} 

デフォルト設定へ

ログインConfigが

@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() 
     ; 
    } 
} 

ありがとうございます！

Answer 1

できません。 SPAを構築するときは、「ページ」または「SPAルート」を確保するのではなく、SPAがアクセスしているAPIエンドポイントを保護するためにセキュリティの焦点をシフトします。したがって、SPAにデータと機能を提供するサーバーエンドポイントを保護するだけです。ユーザーは、代わりにルート/app/#Adminを阻止しようとする、「管理者」機能にアクセスすることが許可されていない場合

たとえば、あなたが確認し、すべての管理関連のAPIエンドポイントをブロック（のような/api/admin、/api/adduser、... ）。あなたがすべきことは、より良いユーザー体験のためになるため -

これはあなたにもが禁止のリンクを非表示にしたり、そのルートを訪問からユーザーを防ぐために、SPA内のコードを持っていないなければならないという意味ではありません。 SPAのルートを隠すことは、純粋にUX用であり、セキュリティではないことだけを知っています。セキュリティはAPIを保護することによって処理されます。