用户注册与登录认证

任务清单
实现注册接口 /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。
前端注册成功跳转登录,登录成功跳转首页。
刷新页面登录状态保持,路由守卫生效。

posted on 2026-06-24 10:56  爱我的果果吖  阅读(1)  评论(0)    收藏  举报