由于原代码较长，我们只提供关键部分的代码实例。
后端代码（Spring Cloud）
UserController.java 中的 login 方法：
@PostMapping("/login")
public ResponseEntity<?> login(@RequestBody LoginForm loginForm){
// 登录逻辑
String token = userService.login(loginForm.getUsername(), loginForm.getPassword());
if(token != null) {
return ResponseEntity.ok(new AuthResponse(token));
} else {
return ResponseEntity.status(HttpStatus.UNAUTHORIZED).body(new MessageResponse("登录失败"));
}
}
UserService.java 中的 login 方法：
public String login(String username, String password) {
// 验证用户名密码逻辑
UserDetails userDetails = userDetailsService.loadUserByUsername(username);
if(passwordEncoder.matches(password, userDetails.getPassword())){
return createToken(userDetails);
}
return null;
}
private String createToken(UserDetails userDetails) {
// 创建JWT Token逻辑
return Jwts.builder()
.setSubject(userDetails.getUsername())
.signWith(SignatureAlgorithm.HS512, SECRET_KEY)
.compact();
}
前端代码（Vue）
src/api/user.js 中的 login 方法：
export default {
login(loginForm) {
return axios.post('/user/login', loginForm)
.then(response => {
return response.data;
});
}
}
src/views/Login.vue 中的登录方法：
methods: {
handleLogin() {
userApi.login(this.loginForm).then((response) => {
if(response.code === 200) {
localStorage.setItem('token', response.data.token);
this.$router.push('/');
} else {
this.error = response.message;
}
}).catch(error => {
console.log(error);
this.error = '登录失败';
});
}
}
以上代码展示了用户登录的核心方法。后端接收前端发送的登录信息，验证成功后生成Token返回给前端，前端将Token存储在localStorage中，以便后续请求携带。