vue实现忘记密码功能,vue验证用户名和密码
本文主要介绍Vue记忆账号密码的功能。用户登录时，如果勾选“记住我”功能选项，会将登录名和密码(加密后)存储在本地缓存中。当加载下一个登录页面时，将自动获取保存的帐户和密码(待解密),并将其显示在登录输入框中。下面是我实现的具体步骤。有需要的朋友可以参考一下。
目录
实施思路：记住账号密码实施流程npm安装base64依赖
实现思路：
用户登录时，如果勾选了“记住我”功能选项，登录名和密码(加密)会存储在本地缓存中，下次加载登录页面时会自动获取保存的账号和密码(待解密)，并显示回登录输入框中。
说到存储在本地缓存，大家一定会想到cookies、localStorage和sessionStorage，但我不推荐后者。既然需要记住密码，那肯定是长时间无效或者下次取消的时候。但是sessionStorage只在当前会话中有效，关闭浏览器窗口后被清除，所以不适用于我们当前的需求。cookies可以手动设置过期时间，过期无效。如果没有设置过期时间，关闭浏览器窗口后就会清除，这显然符合我们的开发需求。除非主动清除localStorage中的信息，否则localStorage将一直存在，浏览器窗口关闭后下一次启动仍然存在。这也符合我们的发展需求。根据业务需求，我选择了localStorage。下面是我实现的具体步骤。不废话，直接启动。
el格式
ref=loginForm
:model=loginForm
:rules=loginRules
class=登录表单
自动完成=开
标签位置=左
div class=用户登录
div class=标题容器
用户登录/span
span class=批注后台登录/span
/div
div class=核心容器
el-form-item prop=用户名
span class=svg-container
i class=icon el-icon-user /
/span
el输入
ref=用户名
v-model=loginForm.username
Placeholder=请输入用户名
name=用户名
type=text
tabindex=1
自动完成=开
/
/El-表单-项目
el-form-item prop=password
span class=svg-container
i class=icon el-icon-lock /
/span
el输入
:key=passwordType
ref=密码
v-model=loginForm.password
:type=passwordType
Placeholder=请输入您的密码
name=password
tabindex=2
自动完成=开
@ keyup . enter . native= handle log in
/
span class= show-pwd @ click= show pwd
图片
src=@/icons/png/pawyc.png
v-if=passwordType===password
/
i class=el-icon-view v-else/i
/span
/El-表单-项目
El-复选框
v-model=已检查
Label=记住密码
name=type
/El-复选框
/div
el按钮
登录
:loading=loading
type=primary
style= width:100%；下边距：30px
@ click . native . prevent= handle log in(loginForm)
立即登录/el-button
/div
/el格式
记住账号密码实现流程
加密：为了提高安全性，密码需要在存储前加密。目前加密方式很多，我这里选择了base64。
npm安装base64依赖
//安装
npm安装-保存js-base64
//简介
const Base64=require( js-Base64 ). Base64
const Base64=require( js-Base64 ). Base64
导出默认值{
data() {
返回{
loginForm: {
用户名： ,
密码： ,
},
已检查：错误，
};
},
已安装(){
让用户名=本地存储。getitem(用户名)
如果（用户名){
这个。loginform。用户名=本地存储。getitem(用户名)
这个。loginform。密码=base64。解码(本地存储。getitem( password )//base64解密
this.checked=true
}
},
//立即登录
handleLogin (loginForm) {
这个参考文献。loginform。验证(异步(isOK)={
if (isOK) {
/* - 账号密码的存储- */
if (this.checked) {
设密码=base64。编码(这个。loginform。密码)//base64加密
localStorage.setItem(用户名，this.loginForm.username)
localStorage.setItem(password ，password)
}否则{
localStorage.removeItem(用户名)
localStorage.removeItem(密码)
}
尝试{
let encrypt=new JSEncrypt() //新建JSEncrypt对象
加密。setpublickey(this。公钥)//设置公钥
让密码=加密。加密(这个。loginform。密码)//对密码进行加密
this.loading=true
等待此[用户/登录]({
用户名：this.loginForm.username，
密码：密码，
验证码：这个。验证码键:这个。loginform。验证码，
isRememberMe:这个。loginform。isRememberMe，
isScanLogin:这个。loginform。isScanLogin？1 : 0
}).然后((res)={
这个10.99 $ router . push(
{
路径："/transitionPage "，
查询：{
用户名：this.loginForm .用户名
}
}
)
})
} catch(错误){
这个message.error(用户名或密码错误!)
}最后{
//不论执行尝试还是捕捉都会执行最后去关闭转圈
this.loading=false
}
}
})
}
},
};
进行到这里也就算是完成这个需求了
这个需求的核心代码我标一下
/* - 账号密码的存储- */
if (this.checked) {
设密码=base64。编码(这个。loginform。密码)//base64加密
localStorage.setItem(用户名，this.loginForm.username)
localStorage.setItem(password ，password)
}否则{
localStorage.removeItem(用户名)
localStorage.removeItem(密码)
}
到此这篇关于某视频剪辑软件实现记住账号密码功能的文章就介绍到这了，更多相关某视频剪辑软件记住密码内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。