后端部分:
/**
* 处理用户登录请求。
*
* @param user 包含登录信息的用户对象,通过RequestBody接收前端传来的JSON数据。
* @param response 用于设置登录成功后的Cookie,以便实现自动登录功能。
* @param request 用于获取前端发送的Cookie,尝试进行无密码登录。
* @return 返回登录结果,如果成功则包含登录用户的信息,如果失败则提供错误信息。
*/
@PostMapping("/login")
public Result login(@RequestBody User user, HttpServletResponse response, HttpServletRequest request) {
// 尝试从已有的Cookies中找到用户手机号,实现Cookie自动登录
Cookie[] cookies = request.getCookies();
if (cookies != null){
for (Cookie cookie : cookies){
if (cookie.getName().equals("userPhone")){
return Result.success(userService.getUserByPhone(cookie.getValue()));
}
}
}
// 获得用户输入的手机号和密码
String userPhone = user.getUserPhone();
String userPassword = user.getUserPassword();
// 根据手机号查询用户信息
User userChecked = userService.getUserByPhone(userPhone);
// 判断用户是否存在
if (userChecked == null) {
return Result.failed("用户不存在");
}
// 验证密码是否正确
if (!userChecked.getUserPassword().equals(userPassword)) {
return Result.failed("密码错误");
}
// 登录成功,设置Cookie以便自动登录
Cookie cookie = new Cookie("userPhone", userPhone);
cookie.setMaxAge(60 * 60 * 24 * 3); // 设置Cookie有效期为三天
response.addCookie(cookie); // 将Cookie添加到响应中
return Result.success(userChecked);
}
后端主要实现三个功能:
1. 从已有Cookie中查找用户id信息,如果Cookie已经包含相关信息,说明用户已经登录过,直接返回相关用户数据即可
// 尝试从已有的Cookies中找到用户手机号,实现Cookie自动登录
Cookie[] cookies = request.getCookies();
if (cookies != null){
for (Cookie cookie : cookies){
if (cookie.getName().equals("userPhone")){
return Result.success(userService.getUserByPhone(cookie.getValue()));
}
}
}
2. 用户初次登录,或登出后 ,Cookie没有携带相关信息时,需要对用户登录的合规性进行验证,验证通过后将用户的id信息添加至Cookie,下次访问时便可直接登录。
// 登录成功,设置Cookie以便自动登录
Cookie cookie = new Cookie("userPhone", userPhone);
cookie.setMaxAge(60 * 60 * 24 * 3); // 设置Cookie有效期为三天
response.addCookie(cookie); // 将Cookie添加到响应中
3. 当前端发出登出请求时,删除Cookie中已保存的用户id信息,下次登录需中心进行合规性验证
@PostMapping("/logout")
public Result logout(@CookieValue(name = "userPhone", required = false) String token, HttpServletResponse response) {
if (token != null) {
// 删除Cookie
Cookie cookie = new Cookie("userPhone", null);
cookie.setMaxAge(0); // 设置为0表示立即过期,即删除Cookie
cookie.setPath("/"); // 设置Cookie的路径以确保能正确删除
response.addCookie(cookie);
return Result.success("登出成功");
}
return Result.failed("登出失败");
}
注意:需要进行特定的跨域配置,不然无法解析请求
// origins:请求源
// allowCredentials:允许携带cookie数据
@CrossOrigin(origins = "http://localhost:5173", allowCredentials = "true") // 允许其他源访问
前端部分:
1. 安装js-cookie库
npm install js-cookie --save
2. 导入js-cookie库
import Cookies from 'js-cookie';
3. 创建axios实例,并允许携带cookie参数
// 在一个单独的文件中,例如 src/api/axiosConfig.js
import axios from 'axios';
const myAxios = axios.create({
withCredentials: true, // 允许携带cookie
baseURL: 'http://localhost:8090', // 设置基础URL
timeout: 5000, // 设置超时时间
headers: { 'Content-Type': 'application/json' }, // 设置请求头
});
export default myAxios;
4. login函数被调用时,将用户id信息放入cookie中
const login = () =>{
//...
// expires:cookie 3天后过期
Cookies.set('userPhone', userPhone, { expires: 3 });
}
5. 登出时从cookie中删除用户id信息
const logout = () =>{
// ...
// 删除cookie
Cookies.remove('userPhone');
}
6. onMounted周期向后端发出自动登录请求
onMounted(()=>{
// 页面挂在时,向后端发出请求,利用cookie实现自动登录
const userPhone = Cookies.get('userPhone')
if(userPhone){
useLoginStore().autoLogin(userPhone)
}
})