Spring Boot 3 + Vue 3实战：实现用户登录功能

以下是一个简化的代码实例，展示了如何在Spring Boot后端和Vue 3前端之间实现用户登录功能：

Spring Boot后端Controller部分:

@RestController
@RequestMapping("/api/auth")
public class AuthController {
 
    @PostMapping("/login")
    public ResponseEntity<?> loginUser(@RequestBody LoginRequest loginRequest) {
        // 假设有一个方法来验证用户凭据并返回一个token
        String token = authenticate(loginRequest.getUsername(), loginRequest.getPassword());
        return ResponseEntity.ok(new AuthResponse(token));
    }
 
    private String authenticate(String username, String password) {
        // 这里应该是用户验证逻辑，例如查询数据库或调用身份验证服务
        // 验证成功则生成并返回token，否则抛出异常
        if ("user".equals(username) && "password".equals(password)) {
            return "fake-token"; // 这里应该是一个生成的JWT token
        }
        throw new BadCredentialsException("Invalid credentials");
    }
}
 
class AuthResponse {
    private String token;
 
    public AuthResponse(String token) {
        this.token = token;
    }
 
    // Getter和Setter
}
 
class LoginRequest {
    private String username;
    private String password;
 
    // Getter和Setter
}

Vue 3前端Login.vue组件部分:

<template>
  <div>
    <input type="text" v-model="loginForm.username" placeholder="Username" />
    <input type="password" v-model="loginForm.password" placeholder="Password" />
    <button @click="login">Login</button>
  </div>
</template>
 
<script>
import { ref } from 'vue';
import axios from 'axios';
 
export default {
  setup() {
    const loginForm = ref({
      username: '',
      password: ''
    });
 
    const login = async () => {
      try {
        const response = await axios.post('api/auth/login', loginForm.value);
        localStorage.setItem('token', response.data.token);
        // 登录成功后的导航或其他逻辑
      } catch (error) {
        console.error('Login failed', error);
      }
    };
 
    return {
      loginForm,
      login
    };
  }
};
</script>

在这个例子中，前端Vue 3应用使用axios发送登录请求到后端Spring Boot应用。后端应用验证凭据并返回一个token，前端将其保存在localStorage中。这个简化的例子展示了如何实现登录流程的基本要素，但在实际应用中还需要考虑更多安全和用户体验的细节。