我如何允許使用Spring Security訪問特定的React哈希路由？

Question

我想限制未經身份驗證的用戶訪問我們的Reactjs單頁面應用程序中的任何路線。我們使用HashRouter處理UI側的路由，所以我們的url看起來像http://localhost/app/#/Home,http://localhost/app/#/Login等。我們使用Spring Security OAuth2和JWT。

當對應用程序發出請求時，所有請求都以/ app /而不是/ app /＃/ Login，/ app /＃/ Home等形式出現。客戶端呈現正確的路由，但它會導致嘗試保護應用程序的問題。爲了允許訪問登錄路由，我需要允許在Spring Security中訪問/ app/all，這會打開所有內容。

是否有可能在Spring Security中保護React哈希路由，還是必須在路由器的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/#/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(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(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安全訪問的API端點上，而不是保護「頁面」或「SPA路線」。因此，只保護爲SPA提供數據和功能的服務器端點。

例如，如果用戶不能訪問「管理員」的功能，而不是試圖阻止路線/app/#Admin，你要確定並阻止所有管理相關的API端點（如/api/admin，/api/adduser，... ）。

這並不意味着你不應該也在SPA內有隱藏禁止鏈接或阻止用戶訪問該路由的代碼 - 你應該這樣做，因爲它提供了更好的用戶體驗。只要知道在SPA中隱藏路線純粹是爲了UX，而不是安全。安全是通過保護api來處理的。