《课次33：用户注册与登录认证》学习笔记

一、任务清单

1. 实现注册接口 /user/register（密码暂不加密）。
2. 前端注册页面调用注册接口。
3. 前端登录页面调用登录接口。
4. 前端存储 token，配置 axios 拦截器，配置路由守卫。

二、核心知识点

知识点	说明
注册流程	前端提交用户名密码 → 后端校验用户名是否已存在 → 存入数据库
Axios 请求拦截器	在请求发出前自动从 localStorage 取出 token 添加到请求头
Axios 响应拦截器	在收到响应后统一处理 401 状态码，自动跳转到登录页
路由守卫	Vue Router 的导航守卫，在页面跳转前检查登录状态

三、操作步骤

本课次是在课次32的工程基础上继续操作。

步骤1：创建 UserRegisterDTO

在 dto 文件夹下新建 UserRegisterDTO 类：

package com.weitoutiao.dto;

import lombok.Data;

@Data
public class UserRegisterDTO {
    private String username;
    private String password;
}

步骤2：在 UserService 中添加注册方法

在 UserService 接口中添加方法：

boolean register(String username, String password);

在 UserServiceImpl 中实现该方法：

@Override
public boolean register(String username, String password) {
    // 检查用户名是否已存在
    LambdaQueryWrapper<User> wrapper = new LambdaQueryWrapper<>();
    wrapper.eq(User::getUsername, username);
    if (this.getOne(wrapper) != null) {
        return false;  // 用户名已存在，注册失败
    }
    User user = new User();
    user.setUsername(username);
    user.setPassword(password);  // 暂不加密
    user.setRole("user");
    user.setNewsCount(0);
    return this.save(user);
}

步骤3：在 UserController 中添加注册接口

@PostMapping("/register")
public Result<String> register(@RequestBody UserRegisterDTO dto) {
    boolean success = userService.register(dto.getUsername(), dto.getPassword());
    if (success) {
        return Result.success("注册成功");
    } else {
        return Result.error("用户名已存在");
    }
}

代码报红时，选择导入对应的类即可。

步骤4：前端修改 request.js

确保 baseURL 为 /api，并配置请求拦截器和响应拦截器：

import axios from 'axios'

const request = axios.create({
    baseURL: '/api',
    timeout: 10000
})

// ===== 请求拦截器：自动添加 token =====
request.interceptors.request.use(config => {
    const token = localStorage.getItem('token')
    if (token) {
        config.headers.Authorization = `Bearer ${token}`
    }
    return config
})

// ===== 响应拦截器：处理 401 =====
request.interceptors.response.use(
    response => response.data,
    error => {
        if (error.response?.status === 401) {
            localStorage.removeItem('token')
            localStorage.removeItem('username')
            window.location.href = '/login'
        }
        return Promise.reject(error)
    }
)

export default request

说明：

• 请求拦截器：每次请求前自动从 localStorage 中取出 token，添加到请求头的 Authorization 字段。
• 响应拦截器：当后端返回 401 状态码（Token 无效或过期）时，自动清除本地存储并跳转到登录页。

步骤5：修改 user.js

将注册请求的地址改为 /user/register：

request.post('/user/register', data)

步骤6：修改 Register.vue 中的 handleRegister 方法

const handleRegister = async () => {
    if (!formRef.value) return
    await formRef.value.validate(async (valid) => {
        if (valid) {
            try {
                const res = await register({
                    username: form.username,
                    password: form.password
                })
                if (res.code === 200) {
                    ElMessage.success('注册成功，请登录')
                    router.push('/login')
                } else {
                    ElMessage.error(res.message || '注册失败')
                }
            } catch {
                ElMessage.error('请求失败，请检查网络')
            }
        }
    })
}

四、本课次结束时的项目状态

• ✅ 后端注册/登录接口可用，登录返回 token
• ✅ 前端注册成功跳转登录，登录成功跳转首页
• ✅ 刷新页面登录状态保持，路由守卫生效

五、接口汇总

接口	方法	路径	说明	权限要求
用户注册	POST	/user/register	注册新用户，密码暂不加密	无需登录
用户登录	POST	/user/login	登录验证，返回 JWT Token	无需登录

六、笔记总结

步骤	核心内容
后端 DTO	UserRegisterDTO 封装注册请求参数
注册业务逻辑	先检查用户名是否存在 → 存在返回 false，不存在则创建用户并保存
注册接口	POST /user/register，返回统一 Result 格式
请求拦截器	自动从 localStorage 取 token 添加到请求头 Authorization: Bearer xxx
响应拦截器	遇到 401 自动清除本地存储并跳转登录页
注册页面	调用注册接口，成功后跳转登录页

本课次完成了用户注册功能的完整开发，并结合课次28的登录功能和课次29的 Token 拦截器，构建了一套完整的前后端认证体系。自此，“微头条”项目已具备完整的用户注册、登录、Token 认证和前端路由守卫功能。