用户注册与登录认证
任务清单
实现注册接口 /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。
前端注册成功跳转登录,登录成功跳转首页。
刷新页面登录状态保持,路由守卫生效。
浙公网安备 33010602011771号