JavaScript与SpringSecurity结合使用方法-js教程-PHP中文网

配置spring security支持cors与无状态jwt认证，允许前端跨域请求并禁用csrf；2. 自定义jsonusernamepasswordauthenticationfilter处理json登录数据；3. 登录成功后返回jwt，前端存储并在后续请求头中携带bearer token；4. 前端通过拦截器统一处理401未授权响应，登出时清除token。核心是前后端协同实现安全的身份认证与权限控制。

javascript与springsecurity结合使用方法

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。

Redis Skill - 高性能缓存管理

Redis 缓存和数据结构管理技能。通过自然语言操作 Redis，支持 String、Hash、List、Set、ZSet、Stream 等数据结构操作。当用户提到 Redis、缓存、消息队列、会话存储时使用此技能。

下载

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负责发起请求并管理用户状态。配合得当，即可实现安全可靠的访问控制。

Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南