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

news2024/9/20 17:01:22

文章目录

  • 1. 前端用户信息保存
  • 2. 登录页面添加
  • 3. 后端实现

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;
    }

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/2044037.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

求职Leetcode算法题(7)

1.搜索旋转排序数组 这道题要求时间复杂度为o(log n),那么第一时间想到的就是二分法,二分法有个前提条件是在有序数组下,我们发现在这个数组中存在两部分是有序的,所以我们只需要对前半部分和后半部分分别…

element ——tree组件懒加载数据、自定义label、修改高亮样式、回显点击状态

需求 整体宽高占一屏,超出滚动条tree组件点击懒加载每一级数据,一共三级三级节点前加icon,标识是否已学习点击高亮显示背景图横向超出省略显示或者横向滚动条纵向超出纵向滚动条修改其字体和间距☆☆☆☆☆从别的页面跳入回显三级点击状态 …

netsh int tcp show global查看TCP参数

TCP 全局参数 接收方缩放状态 : enabled 接收窗口自动调节级别 : normal 加载项拥塞控制提供程序 : default ECN 功能 : disabled RFC 1323 时间戳 : allowed 初始 RTO : 1000 接收段合并状态 : enabled 非 Sack Rtt 复原 : disabled 最大 SYN 重新传输次数 : 4 快速打开 : en…

CrowdTransfer:在AIoT社区中实现众包知识迁移

这篇论文的标题是《CrowdTransfer: Enabling Crowd Knowledge Transfer in AIoT Community》,由 Yan Liu, Bin Guo, Nuo Li, Yasan Ding, Zhouyangzi Zhang, 和 Zhiwen Yu 等作者共同撰写,发表在《IEEE Communications Surveys & Tutorials》上。以下…

springboot航班进出港管理系统--论文源码调试讲解

第2章 开发环境与技术 本章节对开发航班进出港管理系统管理系统需要搭建的开发环境,还有航班进出港管理系统管理系统开发中使用的编程技术等进行阐述。 2.1 Java语言 Java语言是当今为止依然在编程语言行业具有生命力的常青树之一。Java语言最原始的诞生&#xff…

网络协议--TCP/IP协议栈--三握和四挥

文章目录 网络设备交换机交换机的工作原理 路由器路由器工作原理 TCP/IP协议栈TCP/IP四层模型TCP/IP通信过程TCP特性TCP包头结构源端口、目标端口序列号(seq)确认号(小ack)标记位 TCP协议端口号端口号分类ssh服务nc工具抓包 socket套接字端口占用 三次握手Wireshark抓包tcpdump…

构建完美人工智能工程师培养计划

一、理论基础构建 1. 数学与统计学基础:作为AI的基石,扎实的数学与统计学知识不可或缺。培养计划应涵盖高等数学、线性代数、概率论与数理统计、优化理论等课程,为学员打下坚实的理论基础。 2. 计算机科学基础:包括数据结构、算…

DLT645-2007通信协议---读取解析智能电表数据

一、DLT645-2007通讯协议 DLT645-2007是中国电力行业规定的一种智能电表通信协议,主要用于电能表与数据采集设备之间的通信。DLT645-2007协议定义了电能表与数据采集设备之间的数据格式、通信方式、命令集等内容,用于实现电能表数据的采集、传输和管理。…

SpringBoot整合Liquibase

1、是什么? Liquibase官网 Liquibase是一个开源的数据库管理工具,可以帮助开发人员管理和跟踪数据库变更。它可以与各种关系型数据库和NoSQL数据库一起使用,并提供多种数据库任务自动化功能,例如数据库迁移、版本控制和监控。Li…

盲盒抽奖源码

介绍: 功能上还可以,商品和盲盒可以在你程序里添加,设置概率等!! 新盲盒星球抽奖商城手机网站源码 随机开箱抢购 代码有点大,三百多M。 教程搭建很简单,基本10分钟搭建一套,可一个服务器搭建多套,只要你…

【时时三省】(C语言基础)模拟实现字符串相关函数

山不在高,有仙则名。水不在深,有龙则灵。 ----CSDN 时时三省 模拟实现库函数:strcpy 示例: const修饰指针 示例: const 修饰变量,这个变量为常变量,不能被修改,但本质上还是变量 正常num=20是改不了它…

招聘管理型岗位,HR会考察候选人的哪些方面?

团队管理能力 团队管理能力可以说是管理型岗位最基本的要求,只有具备优秀的团队管理能力,才能够带领团队实现组织目标,提高团队凝聚力,而想要考察一个人是否具备团队管理能力,就要通过多方面来测试。可以先了解一下候…

CSS笔记总结:第五天(HTML+CSS笔记完结)

Xmind鸟瞰图: 简单文字总结: css知识总结: 元素的显示与隐藏: 1.通过display隐藏元素 不保留位置 2.通过visibility 隐藏元素 保留位置 3.overflow 溢出隐藏 鼠标样式cursor: 1.defauly小白 2.p…

走进 keepalived:解析高可用架构背后的关键技术

一、什么是keepalived Keepalived 是一个用于实现服务器高可用性(High Availability,简称 HA)的软件。 简单来说,它的主要作用是检测服务器的状态,并在主服务器出现故障时,自动将服务切换到备份服务器上&…

SVN权限控制解析

一、基础数据说明 1. 代码目录存在多级 2. 角色存在多级 二、规则说明 结合例子讲规则 1、多级文件夹 a. 继承与覆盖 【文件夹层级】: Repositories/BS_Projects/科顺 BS_Projects包含了多个项目,每个项目是一个文件夹,比如“科顺”是其…

分布式事务Seata保证审批状态一致性

文章目录 下载安装Seata创建对应数据库修改application.yml相应配置启动SeataPmHub 实战——添加任务事务管理业务库添加undo_log 表对应服务加上对应的seata依赖Nacos 配置文件 pmhub-project-dev.yml 添加 seata 配置:接口添加 GlobalTransactional 注解涉及数据表…

Centos7升级gitlab(17)

在 CentOS 7 中将 GitLab 从版本 17.1.1 升级到 17.2.2,涉及以下步骤。请务必在升级前备份数据,以防止升级过程中出现问题导致数据丢失。 升级步骤 1. 备份 GitLab 数据 在升级之前,确保已经备份了 GitLab 的数据,包括数据库、…

【windows安装gradle】

1.去官网下载自己需要的版本。 2.直接解压到指定目录 3.配置环境变量 3.1.新建 GRADLE_HOME 环境变量值指向你的 Gradle 的解压路径 3.2.将 %GRADLE_HOME%\bin 添加到 Path 环境变量中 4.打开cmd命令行输入gradle -v查看是否安装成功以及当前版本 下面显示说明已经安装完成了…

软件测试用例的编写(六)

软件测试用例 定义 测试用例(TestCase)是为项目需求而编制的一组测试输入,执行步骤,以及预期结果,以便测试某个程序是否满足客户需求 可以总结为:每一个测试点的数据设计和步骤设计 – 对测试点的细化 作…

CentOS 7虚拟机安装部署MongoDB

1.添加MongoDB的YUM仓库 打开终端,执行以下命令来添加MongoDB的YUM仓库: sudo vi /etc/yum.repos.d/mongodb-org-4.4.repo 在打开的文件中,输入以下内容: [mongodb-org-4.4] nameMongoDB Repository baseurlhttps://repo.mon…