Vue3 “记住我”功能 密码加密储存

已于 2023-04-04 15:18:52 修改
阅读量773 收藏 1
点赞数
分类专栏： 功能实现 文章标签： javascript 前端 开发语言
于 2023-04-04 15:15:45 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wen123789/article/details/129953275
版权
/ 登录信息 let loginform = {// 获取本地储存的密码 const getPwd =() => {// base64解密 loginform . isRem = true;// 如果出现数据无法响应式的情况 强制刷新页面 用法可自行搜索 // that.$forceUpdate();} };// 记住密码 const remPws =() => {// base64加密 // console.log(password + "password");} else {
摘要由CSDN通过智能技术生成

一、介绍

1. 密码加密

为提高安全性，密码存储前需进行加密处理。
本文选用base64的方法进行加密。

2. 本地储存

本地储存有三种方式：SessionStorage、LocalStorage、Cookies。具体特点不多作介绍。
本文选用LocalStorage。

注：本文是基于Vue3+Vite 模板的编写
组件script部分使用了setup语法糖。

二、功能页面

    <div class="logreg-box">
      <div class="form-box login">
        <form action="#">
          <h2>登 录</h2>

          <div class="input-box">
            <input
              type="email"
              placeholder="请输入邮箱"
              v-model="loginform.email"
            />
最低0.47元/天 解锁文章
AXI12 08
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue登录页-记住密码功能
10-05
vue登录页-记住密码功能 1.下载jsencrypt 加密解密插件 npm install jsencrypt --dev 2.引用src-utils -jsencrypt.js文件， 3.登录页先引用-代码如下 import Cookies from 'js-cookie'//cook引用 2021-08-09 import { encrypt, decrypt } from '@/utils/jsencrypt'//rememberMe-password加密 1.加载页面使用getCookie存下 created(){ this.getCookie(); }, getCookie() {//rememberMe功能 const username = Cookies.get("username"); const password = Cookies.get("password"); const rememberMe = Cookies.get('rememberMe') this.loginForm = { username: username === undefined ? this.loginForm.username : username, password: password === undefined ? this.loginForm.password : decrypt(password), rememberMe: rememberMe === undefined ? false : Boolean(rememberMe) }; }, 2.登录按钮里面写下面代码 if (this.loginForm.rememberMe) {//rememberMe功能 Cookies.set("username", this.loginForm.username, { expires: 30 }); Cookies.set("password", encrypt(this.loginForm.password), { expires: 30 }); Cookies.set('rememberMe', this.loginForm.rememberMe, { expires: 30 }); } else { Cookies.remove("username"); Cookies.remove("password"); Cookies.remove('rememberMe'); }
vue3实现登录页面记住我
leveretz的博客
07-15 2099
vue3实现登录页面记住我
vue2中实现记住密码功能
最新发布
DZQ1223的博客
06-17 390
在使用 Vue 2 和 Element UI 实现登录页面的记住密码功能时，为了安全起见，需要对密码进行加密处理。你可以使用加密库如 crypto-js 来对密码进行加密和解密。以下是完整的示例代码，展示了如何实现这个功能。
vue3实现记住密码功能
weixin_45600052的博客
08-09 1388
3. 在onMounted中查询cookie中是否有用户名密码(使用Base64解密)，将解密出的数据赋值给form中的数据即可。2. 如果勾选了，需要将用户名和密码存入本地(一般存在cookie中 需要使用Base64进行加密)1. 判断记住密码的复选框是否勾选。
vue3实现 后台管理系统登录与记住密码功能（element-plus）
shi450561200的博客
06-12 2914
【代码】element-plus后台管理系统实现登录与记住密码功能。
vue3_记住密码功能实现（cookie与sessionStorage，sessionStorage区别以及js-cookie/jsencrypt加密）
qq_45104829的博客
03-21 1128
此处我使用的是Cookie来实现记住密码功能（js-cookie）,使用jsencrypt对密码进行加密解密。可看到储存的cookie。
Vue中登录页面记住密码，并使用crypto-js加密
05-17 4532
主要用到js-cookie来存储用户名和密码，关于js-cookie介绍：https://blog.csdn.net/qq_40323256/article/details/116838848 一、下载js-cookie cnpm i -S js-cookie 二、main.js中全局引入 import Cookies from 'js-cookie' Vue.prototype.$cookie = Cookies; 三、使用 <el-checkbox v-model="rem..
前端vue+elementUI如何实现记住密码功能
10-14
在前端开发中，实现“记住密码”功能是一个常见的...总之，Vue.js结合Element UI实现“记住密码”功能主要通过监听复选框变化，利用Cookie进行数据持久化。在设计和实现这类功能时，应始终关注用户体验和数据安全性。
Vue+element+cookie记住密码功能的简单实现方法
10-14
总之，实现Vue+Element+Cookie的记住密码功能，需要理解Vue.js的响应式数据绑定、事件处理，以及如何使用Element UI构建表单，同时还需要掌握Cookie管理和加密算法。通过这些技术，我们可以为用户提供一个便捷且安全...
vue中使用cookies和crypto-js实现记住密码和加密的方法
10-17
在Vue.js应用中，安全地处理用户密码是至关重要的，特别是在实现“记住密码”功能时。本文将详细介绍如何结合cookies和crypto-js库实现这一功能，同时确保数据的加密安全性。 首先，我们需要安装crypto-js库，这是...
vue项目实现记住密码到cookie功能.zip
10-21
在Vue.js项目中实现“记住密码”功能，通常涉及到用户登录状态的持久化存储，以便用户下次访问时能自动填充之前保存的登录信息。这里主要使用的技术是Cookie，因为Cookie是一种简单且常见的在客户端存储小量数据的...
vue3+js 实现记住密码功能
村长在路上
02-24 1191
除非主动清除localStorage 里的信息 ，不然永远存在，关闭浏览器之后下次启动仍然存在。可以手动设置过期时间，关闭浏览器之后就清除了。每次请求都会被传送到服务器。不与服务器进行交互通信。存放数据大小一般为4K。存放数据大小一般为5M。
vue3写一个记住密码功能
Jimmy的前端博客
04-15 2682
第一步：插件安装 js-base64 用来对用户名和密码加密 npm install js-base64 js-cookie 用来存储用户名和密码 npm install js-cookie 第二步：存储逻辑 点击登录，在登录前对用户的用户名和密码进行加密，然后保存到cookie const onSubmit = async (formEl: FormInstance | undefined) => { if (!formEl) return await formEl.va.
vue项目登录页面实现记住用户名和密码
黄钢的博客
07-27 2659
下次再登录，就会根据上一次的勾选状态来判断是否填充form输入框，逻辑如下。挂载页面时，判断localstorage中是否有需要的对象。记录一下实现的逻辑，应该分两步来理解这个逻辑。因为逻辑比较简单，就不再画图了。
Vue实现登录记住账号密码功能的思路与过程
菜鸟教程
04-25 7214
文章来源： 学习通http://www.bdgxy.com/ 目录实现思路这里有三种方法来存储账号密码：功能界面记住账号密码功能的具体实现密码加密localStoragecookies总结实现思路 用户登录时若勾选“记住我”功能选项，则将登录名和密码（加密后）保存至本地缓存中，下次登录页面加载时自动获取保存好的账号和密码（需解密），回显到登录输入框中。 这里有三种方法来存储账号密码： 1. sessionStorage(不推荐) 1). 仅在当前会话下有效，关闭浏览器窗口后就被清除了 2). 存放数据
vue3 登录记住密码 存到cookie里设置过期时间，同时账号密码通过des加密
Smile_666666的博客
01-11 1303
vue3 登录记住密码 存到cookie里设置过期时间 const userForm = reactive({ phone: "", // 手机号码 username: "", // 账号 password: "", // 密码 authCode: "", // 验证码 checked: false, // 记住密码 }) // 记住密码 function set
Spring Boot+Vue项目 微博系统（8）：记住我功能配置源码分析
编程碎碎念
09-01 511
这里再多说下，对于记住我功能，同样可以查看RememberMeConfigurer，看看是怎么实现的： public final class RememberMeConfigurer<H extends HttpSecurityBuilder<H>> extends AbstractHttpConfigurer<RememberMeConfigurer<H>, H> { private static final String DEFAULT_REMEM
java/vue使用国密sm2、sm3、sm4进行数据加密
热门推荐
qq243920161的博客
11-15 1万+
java/vue使用国密sm2、sm3、sm4
vue3（TS）登录账号和密码进行加密 （crypto-js）要求:aes cbc 填充模式: PKCS7 , base64URL格式
m0_56565389的博客
10-10 1513
1.在utils下新建一个AES-Pkcs7.ts文件 用来封装加密方法。2.在你的login.vue页面引入。记得先安装crypto-js依赖。
vue3 记住密码
05-31
Vue3中记住密码的实现方法有多种，下面介绍其中一种常见的方式： 1. 在登录页面添加一个“记住密码”的复选框，并在用户提交表单时获取该复选框的状态。 2. 如果用户勾选了“记住密码”，则在本地存储中保存用户名...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值