配置Spring Security支持CORS与无状态JWT认证，允许前端跨域请求并禁用CSRF；2. 自定义JsonUsernamePasswordAuthenticationFilter处理JSON登录数据；3. 登录成功后返回JWT，前端存储并在后续请求头中携带Bearer Token；4. 前端通过拦截器统一处理401未授权响应，登出时清除Token。核心是前后端协同实现安全的身份认证与权限控制。
JavaScript与Spring Security结合使用，主要是为了解决前后端分离架构下的身份认证与权限控制问题。前端通过JavaScript（如Vue、React或原生Ajax）发送请求，后端使用Spring Security进行安全拦截与验证。以下是关键实现步骤和注意事项。
1. 配置Spring Security支持CORS与JSON登录
默认情况下，Spring Security会阻止跨域请求，并只接受表单提交的登录数据。在前后端分离场景中，前端通常通过Ajax发送JSON格式的用户名密码，因此需要自定义配置以支持这些行为。示例配置：
@Configuration
@EnableWebSecurity
public class SecurityConfig {
@Bean
public SecurityFilterChain filterChain(HttpSecurity http) throws Exception {
http
.cors().and()
.csrf().disable() // 前后端分离可禁用CSRF，或启用并由前端处理
.sessionManagement().sessionCreationPolicy(SessionCreationPolicy.STATELESS)
.and()
.authorizeHttpRequests(authz -> authz
.requestMatchers("/login", "/register").permitAll()
.anyRequest().authenticated()
)
.addFilterBefore(new JwtAuthenticationFilter(), UsernamePasswordAuthenticationFilter.class);
return http.build();
}
@Bean
public CorsConfigurationSource corsConfigurationSource() {
CorsConfiguration configuration = new CorsConfiguration();
configuration.setAllowedOriginPatterns(Arrays.asList("*"));
configuration.setAllowedMethods(Arrays.asList("GET","POST","PUT","DELETE"));
configuration.setAllowedHeaders(Arrays.asList("*"));
configuration.setAllowCredentials(true);
UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
source.registerCorsConfiguration("/**", configuration);
return source;
}
}
说明：开启CORS支持，允许前端域名访问；关闭CSRF（或使用Token机制处理）；使用无状态会话（STATELESS），适合JWT方案。
2. 实现基于JSON的登录接口
传统Spring Security使用表单登录，但JavaScript应用通常发送JSON数据。需自定义过滤器来处理JSON格式的登录请求。示例：自定义登录过滤器
public class JsonUsernamePasswordAuthenticationFilter extends UsernamePasswordAuthenticationFilter {
@Override
public Authentication attemptAuthentication(HttpServletRequest request, HttpServletResponse response) {
if (request.getContentType().equals(MediaType.APPLICATION_JSON_VALUE)) {
ObjectMapper mapper = new ObjectMapper();
try {
LoginRequest loginRequest = mapper.readValue(request.getInputStream(), LoginRequest.class);
UsernamePasswordAuthenticationToken token =
new UsernamePasswordAuthenticationToken(loginRequest.getUsername(), loginRequest.getPassword());
return getAuthenticationManager().authenticate(token);
} catch (IOException e) {
throw new RuntimeException("无法读取登录信息");
}
} else {
return super.attemptAuthentication(request, response);
}
}
}
将该过滤器添加到Spring Security链中，替代默认的UsernamePasswordAuthenticationFilter。
3. 使用JWT进行令牌认证
由于不使用Session，推荐采用JWT（JSON Web Token）作为认证凭证。用户登录成功后，后端生成JWT返回给前端，前端在后续请求中通过Authorization头携带Token。流程如下：
- 前端通过JavaScript发送POST请求到/login，携带用户名密码
- 后端验证成功后返回JWT字符串
- 前端将JWT存储在localStorage或内存中
- 每次请求时，在请求头中添加 Authorization: Bearer
- 后端通过过滤器解析JWT并设置SecurityContext
示例：前端请求代码（使
用fetch）
fetch('/login', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ username: 'user', password: '123456' })
})
.then(res => res.json())
.then(data => {
localStorage.setItem('jwt', data.token);
});
后续请求带上Token：
fetch('/api/data', {
headers: {
'Authorization': 'Bearer ' + localStorage.getItem('jwt')
}
})
4. 前端处理认证失败与登出
Spring Security在未认证或Token失效时会返回401状态码，前端JavaScript需统一拦截此类响应，跳转登录页或弹出提示。建议做法：
- 使用axios拦截器或封装fetch，统一处理401响应
- 登出时清除本地Token，并可选调用/logout接口使Token失效（若使用Redis维护黑名单）
- 避免将JWT长期存储在localStorage中以防XSS攻击，敏感系统建议使用httpOnly Cookie存储
基本上就这些。核心是前后端约定认证方式，Spring Security提供保护机制，JavaScript负责发起请求并管理用户状态。配合得当，即可实现安全可靠的访问控制。
