SpringBoot+Vue实战：从零搭建电商系统登录注册模块（含Cookie状态管理）

SpringBoot+Vue实战：从零搭建电商系统登录注册模块（含Cookie状态管理）

电商平台的用户认证系统如同商业大厦的门禁，既要保证通行效率，又要防范未授权闯入。这套基于SpringBoot和Vue的解决方案，不仅实现了基础的登录注册功能，更通过Cookie状态管理打造了丝滑的用户体验。下面我们将从技术选型到具体实现，完整呈现企业级认证系统的搭建过程。

1. 技术架构设计

现代电商认证系统需要平衡安全性与用户体验。我们采用前后端分离架构，后端使用SpringBoot提供RESTful API，前端通过Vue构建动态交互界面，状态管理则依托浏览器Cookie机制。

技术栈对比表：

在数据库设计层面，用户表需要包含以下核心字段：

CREATE TABLE `user` (
  `id` BIGINT NOT NULL AUTO_INCREMENT,
  `username` VARCHAR(50) UNIQUE,
  `password` CHAR(60),  -- BCrypt加密后的固定长度
  `avatar` VARCHAR(255),
  `created_at` TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
  PRIMARY KEY (`id`)
);

安全提示：密码字段必须使用BCrypt等自适应哈希算法，绝对禁止明文存储用户密码

2. 后端认证服务实现

SpringBoot后端需要处理三个核心功能：用户注册、登录认证和会话管理。我们采用分层架构设计，保持代码的清晰性和可维护性。

2.1 密码加密模块

首先创建密码工具类，使用Spring Security提供的BCrypt实现：

import org.springframework.security.crypto.bcrypt.BCrypt;

public class PasswordUtil {
    // 生成加密后的密码
    public static String encrypt(String rawPassword) {
        return BCrypt.hashpw(rawPassword, BCrypt.gensalt());
    }
    
    // 验证密码是否匹配
    public static boolean matches(String rawPassword, String encodedPassword) {
        return BCrypt.checkpw(rawPassword, encodedPassword);
    }
}

2.2 用户注册接口

注册接口需要处理用户名唯一性验证和密码加密：

@RestController
@RequestMapping("/api/auth")
public class AuthController {
    
    @Autowired
    private UserRepository userRepository;

    @PostMapping("/register")
    public ResponseEntity<?> register(@Valid @RequestBody RegisterDTO dto) {
        if (userRepository.existsByUsername(dto.getUsername())) {
            return ResponseEntity.badRequest().body("用户名已存在");
        }
        
        User user = new User();
        user.setUsername(dto.getUsername());
        user.setPassword(PasswordUtil.encrypt(dto.getPassword()));
        userRepository.save(user);
        
        return ResponseEntity.ok("注册成功");
    }
}

2.3 登录认证接口

登录成功后生成会话标识并设置Cookie：

@PostMapping("/login")
public ResponseEntity<?> login(@Valid @RequestBody LoginDTO dto, 
                              HttpServletResponse response) {
    User user = userRepository.findByUsername(dto.getUsername())
            .orElseThrow(() -> new RuntimeException("用户不存在"));