12、springboot3 vue3开发平台-前端-记住我功能实现

1. 前端用户信息保存

使用pinia持久化保存用户名密码
src/stores/remember-me.js

// 定义 store
import { defineStore } from "pinia"
import {reactive} from 'vue'

export const useRememberMeStore = defineStore('rememberMe', () => {
    
    const rememberMe = reactive({
        username: '',
        password: ''
    })

    
    const setRememberMe = (newusername: string, newpassword: string) => {
        rememberMe.username = newusername
        rememberMe.password = newpassword
    }

    
    const removeRememberMe = () => {
        rememberMe.username = ''
        rememberMe.password = ''
    }

    return {
        rememberMe, setRememberMe, removeRememberMe
    }
}, 
{
    persist: true   // 持久化存储
}
)

2. 登录页面添加

import { useRememberMeStore } from '@/stores/remember-me'
const rememberMeStore = useRememberMeStore()
 // 查询本地是否保存用户信息
    const getRemember = () => {
        if (rememberMeStore.rememberMe.username && rememberMeStore.rememberMe.password) {
            loginForm.username = atob(rememberMeStore.rememberMe.username)
            loginForm.password = atob(rememberMeStore.rememberMe.password)
            console.log(rememberMeStore.rememberMe.username, rememberMeStore.rememberMe.password)
        }
    }
    getRemember()

    // 保存用户信息
    const setRememberMe = (username: string, password: string) => {
        rememberMeStore.setRememberMe(btoa(username), btoa(password))
    }

在登录成功后保存记住信息

3. 后端实现

修改后端代码：

 @Override
    public LoginVo login(LoginDto loginDto) {
        SysUser user = getUserByName(loginDto.getUsername());
        if (ObjectUtil.isNull(user)) {
            throw new ServiceException(HttpStatus.UNAUTHORIZED,"认证失败！");
        }
        if (!BCryptUtils.checkpw(loginDto.getPassword(), user.getPassword())) {
            throw new ServiceException(HttpStatus.UNAUTHORIZED,"密码错误！");
        }
        LoginVo loginVo = null;
        try {
            loginVo= getLoginVo(user);
        } catch (Exception e) {
            e.printStackTrace();
            throw new ServiceException(HttpStatus.UNAUTHORIZED, "用户相关信息错误");
        }
        // 登录，获取tokenInfo , 存储用户session
        if (loginDto.getRememberMe()) {
            StpUtil.login(user.getId());    // 记住登录
        } else {
            StpUtil.login(user.getId(), false);    // 登录
        }

        // 设置用户信息
        StpUtil.getSession().set("userInfo", new UserInfo(user.getId(), user.getUsername()));
        // 获取token
        SaTokenInfo tokenInfo = StpUtil.getTokenInfo();
        loginVo.setSaTokenInfo(tokenInfo);
        return loginVo;
    }