JavaWeb学习：Vue+SSM利用Cookie实现自动登录

后端部分：

    /**
     * 处理用户登录请求。
     * 
     * @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)
  }
})