用户注册与登录认证

用户注册与登录认证

学习目标

• 实现注册接口 /user/register
• 前端注册页面调用注册接口。
• 前端登录页面调用登录接口。
• 前端存储token，配置axios拦截器，配置路由守卫。

操作步骤

步骤1. 创建UserRegisterDTO

package com.weitoutiao.dto;

import lombok.Data;

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

添加方法：右键dto文件夹，新建java类：UserRegisterDTO，如图所示：

步骤2. 在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<?> 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

步骤5：修改user.js

修改请求地址

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。
• 前端注册成功跳转登录，登录成功跳转首页。
• 刷新页面登录状态保持，路由守卫生效。