Spring Security搭配React使用自定义登录页功能失效求助

问题根源 #

你当前配置仅放开了 /home、/login 两个路径的匿名访问权限，React 构建产出的静态资源（js、css、图片等，默认路径前缀为 /static/**，还有 favicon.ico、manifest.json 等公共资源文件）没有加入访问白名单。访问自定义登录页时，浏览器发起的静态资源请求会被Spring Security拦截，触发重定向到 /login，而加载 /login 页又依赖这些静态资源，最终形成重定向死循环，导致页面加载失败。
对应的报错截图如下：

解决步骤 #

1. 放开静态资源的访问权限 #

修改Spring Security配置的authorizeRequests块，新增静态资源路径的白名单规则，示例如下：

@Override
protected void configure(HttpSecurity http) throws Exception {
    http
            .authorizeRequests()
            // 新增静态资源白名单
            .antMatchers("/static/**", "/favicon.ico", "/asset-manifest.json", "/manifest.json").permitAll()
            .antMatchers("/home").permitAll()
            .antMatchers("/login").permitAll()
            .antMatchers("/welcome").authenticated()
            .antMatchers("/admin").hasAuthority("ADMIN")
            .antMatchers("/emp").hasAuthority("EMPLOYEE")
            .antMatchers("/mgr").hasAuthority("MANAGER")
            .antMatchers("/common").hasAnyAuthority("EMPLOYEE", "MANAGER")
            .anyRequest().authenticated()

            .and()
            .formLogin()
            .loginPage("/login")
            .defaultSuccessUrl("/home", true)

            .and()
            .logout()
            .logoutRequestMatcher(new AntPathRequestMatcher("/logout"))

            .and()
            .exceptionHandling()
            .accessDeniedPage("/accessDenied");
}

2. 配置前端路由映射（使用BrowserRouter时必须配置） #

因为Spring托管了React的静态资源，前端路由由React侧控制，需要添加Spring MVC视图配置，将前端路由路径映射到React的入口文件index.html，避免直接访问前端路由时出现404：

@Configuration
public class WebMvcConfig implements WebMvcConfigurer {
    @Override
    public void addViewControllers(ViewControllerRegistry registry) {
        // 所有前端控制的路由都转发到index.html
        registry.addViewController("/login").setViewName("forward:/index.html");
        registry.addViewController("/home").setViewName("forward:/index.html");
        registry.addViewController("/admin").setViewName("forward:/index.html");
        registry.addViewController("/emp").setViewName("forward:/index.html");
        registry.addViewController("/mgr").setViewName("forward:/index.html");
        registry.addViewController("/accessDenied").setViewName("forward:/index.html");
    }
}

3. 校验登录表单配置 #

如果你的自定义登录页的表单提交地址、参数名和Spring Security默认值不一致，需要在Security配置中显式指定：

• 默认登录处理地址：POST /login
• 默认用户名参数名：username
• 默认密码参数名：password
  修改示例：

.formLogin()
.loginPage("/login")
// 显式指定前端表单提交的登录接口地址
.loginProcessingUrl("/api/login")
// 显式指定前端传参的用户名、密码字段名
.usernameParameter("account")
.passwordParameter("pwd")
.defaultSuccessUrl("/home", true)

内容的提问来源于stack exchange，提问作者Peter Kronenberg