Vue 3 整合 Spring Security 与 JWT 实现登录认证

在构建现代web应用时，安全性是一个不可忽视的方面。特别是当使用单页应用（SPA）如Vue 3时，传统的session管理方式不再适用，因此使用JSON Web Tokens（JWT）配合Spring Security进行认证和授权成为了流行的选择。本文将详细介绍如何整合Vue 3与Spring Security和JWT来处理登录认证的流程。

1. 概述

• Vue 3: 是一个现代JavaScript框架，用于构建用户界面。
• Spring Security: 是一个提供安全性的框架，用于保护Web应用程序免受攻击。
• JWT (JSON Web Tokens): 是一种开放标准（RFC 7519），用于双方之间安全地传输信息。它通常用于身份验证和信息交换。

2. 搭建Spring Boot项目并集成Spring Security和JWT

首先，你需要创建一个Spring Boot项目并添加以下依赖：

xml <!-- Spring Boot Starter Security --> <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-security</artifactId> </dependency> <!-- JWT Support --> <dependency> <groupId>io.jsonwebtoken</groupId> <artifactId>jjwt-api</artifactId> <version>0.11.5</version> </dependency> <dependency> <groupId>io.jsonwebtoken</groupId> <artifactId>jjwt-impl</artifactId> <version>0.11.5</version> </dependency> <dependency> <groupId>io.jsonwebtoken</groupId> <artifactId>jjwt-jackson</artifactId> <version>0.11.5</version> </dependency>

3. 配置Spring Security和JWT

接下来，配置Spring Security来使用JWT：

```java
@Configuration
@EnableWebSecurity
public class WebSecurityConfig extends WebSecurityConfigurerAdapter {
@Autowired
private JwtTokenProvider jwtTokenProvider; // 自定义的JWT工具类，负责生成和验证JWTs。

@Override
protected void configure(HttpSecurity http) throws Exception {
    http.csrf().disable() // Disabling CSRF since we are using JWTs for security.
        .authorizeRequests() // 设置权限规则。
        .antMatchers("/api/authenticate").permitAll() // 允许任何请求访问 /api/authenticate 路径。
        .anyRequest().authenticated() // 所有其他请求都需要认证。
        .and() 
        .sessionManagement() // 管理会话，由于使用了JWT，我们不需要session。
        .sessionCreationPolicy(SessionCreationPolicy.STATELESS); // 设置Session为无状态。  
    http.addFilterBefore(new JwtTokenFilter(), UsernamePasswordAuthenticationFilter.class); // 在UsernamePasswordAuthenticationFilter之前添加JwtTokenFilter。  
}  

}
```

4. 创建JWT工具类和服务层APIs（REST Controllers）

为了生成和验证JWTs，你可以创建一个工具类和一个服务层API：
java // JwtTokenProvider.java public class JwtTokenProvider { // 方法来生成JWTs public String generateToken(String username) { return Jwts.builder() .setSubject(username) .setExpiration(new Date(System.currentTimeMillis() + 1000 * 60 * 60 * 10)) // 设置token有效期为10小时 .signWith(SignatureAlgorithm.HS256, "secret") // 使用HS256算法和一个密钥进行签名 .compact(); } // 方法来验证JWTs public Claims validateToken(String token) { return Jwts.parser() .setSigningKey("secret") .parseClaimsJws(token) .getBody(); } } #### 5. Vue 3前端实现登录逻辑 在Vue 3中，你可以使用Axios来发送HTTP请求与后端进行交互： javascript // 使用Axios发送POST请求到/api/authenticate以获取JWT async function login(username, password) { const response = await axios.post('http://localhost:8080/api/authenticate', { username: username, password: password }); if (response.data && response.data.token) { const token = response.data.token; localStorage.setItem('jwtToken', token); // 将token存储在localStorage中以便后续请求使用 } else { console.error('登录失败:', response); } }