vue登录密码加密,vue验证用户名和密码
最近在研究vue的时候发现vue有很多漏洞。下面文章主要介绍在Vue中实现登录和记忆账号密码功能的思路和过程。通过示例代码非常详细的介绍，有需要的朋友可以参考一下。
目录
实现思路这里有三种存储账号密码的方式：功能接口记住账号密码功能的具体实现密码加密localStoragecookies总结
实现思路
用户登录时，如果勾选了“记住我”功能选项，登录名和密码(加密后)会保存在本地缓存中，下次加载登录页面时会自动获取保存的账号和密码(待解密)，并显示回登录输入框中。
这里有三种方法来存储账号密码：
1.会话存储(不推荐)
1).它仅在当前会话中有效，并在关闭浏览器窗口后被清除。
2)存储数据的大小一般为5MB。
3)与服务器没有交互通信。
2.本地存储
1).除非主动清除localStorage中的信息，否则它将一直存在，并且在浏览器窗口关闭后的下一次仍然存在。
2)存储数据的大小一般为5MB。
3)与服务器没有交互通信。
3.饼干
1).过期时间可以手动设置，过期无效。没有设置过期时间，关闭浏览器窗口后会清除过期时间。
2)存储数据的大小一般为4K。
3).每个请求都将被发送到服务器。
本文主要介绍第二种和第三种方法的用法。
功能界面
El-form:model= loginForm :rules= rules ref= loginForm label-width= 100px class= loginForm demo-rule form
！-账号-
El-form-item label= account number prop= userId autocomplete= on
El-input v-model= loginform . userid placeholder=请输入帐号/el-input
/El-表单-项目
！-密码-
El-form-item label= password prop= password
El-input type= password v-model= log in . password placeholder=请输入密码 @ keyup . enter= submit form( log in )/El-input
/El-表单-项目
div class=提示
！-记得我吗-
El-checkbox v-model= checked class= remember me 记住我/el-checkbox
！-拿回密码-
El-button type= text @ click= open() class= forget pw 忘记密码了？/el-button
/div
！-登录-
El-表单-项目
El-button type= primary @ click= submit form(登录表单) class= submit-BTN 登录/el-button
/El-表单-项目
/el格式
记住账号密码功能的具体实现
密码加密
为了提高安全性，密码应该在存储前加密。目前加密方式很多，我这里选择了base64。
Np安装base64依赖项
//安装
npm安装-保存js-base64
//简介
const Base64=require( js-Base64 ). Base64
localStorage
导出默认值{
data() {
返回{
loginForm: {
用户Id: ，
密码： ，
},
已检查：错误，
};
},
已安装(){
let username=local storage . getitem( userId )；
如果(用户名){
this . loginform . userId=local storage . getitem( userId )；
this . loginform . password=base64 . decode(local storage . getitem( password )；//base64解密
this.checked=true
}
},
方法：{
submitForm(formName) {
这个。$ refs[表单名]。验证((有效)={
如果(有效){
/* - */
if (this.checked) {
设password=base64 . encode(this . loginform . password)；//base64加密
localStorage.setItem(userId ，this . loginform . userId)；
localStorage.setItem(password ，密码)；
}否则{
local storage . remove item(“userId”)；
local storage . remove item( password )。
}
/*-http登录请求-*/
}否则{
console.log(错误提交！);
返回false
}
});
},
},
};
cookies
导出默认值{
data() {
返回{
loginForm: {
用户Id: ，
密码： ，
},
已检查：错误，
};
},
已安装(){
this . get cookie()；
},
方法：{
submitForm(formName) {
这个参考文献[表单名]。验证((有效)={
如果（有效){
/* - 账号密码的存储- */
if (this.checked) {
设密码=base64。编码(这个。loginform。密码)；//base64加密
这个。设置cookie(this。loginform。userid，密码，7)；
}否则{
this.setCookie(， ，-1)；//修改2值都为空，天数为负一天就好了
}
/* - http登录请求- */
}否则{
console.log(错误提交！);
返回错误的
}
});
},
//设置甜饼干
setCookie(用户标识，密码，天数){
let Date=new Date()；//获取时间
约会。settime(日期。gettime()24 * 60 * 60 * 1000 *天);//保存的天数
//字符串拼接甜饼干
window.document.cookie=
userId = userId path=/；expires= date。togmtstring()；
window.document.cookie=
密码 = password path=/；expires= date。togmtstring()；
},
//读取甜饼干将用户名和密码回显到投入框中
getCookie() {
if (document.cookie.length 0) {
设arr=document。饼干。拆分(；);//分割成一个个独立的"关键字=值"的形式
对于(设I=0；长度；i ) {
设arr2=arr[i].拆分(=);//再次切割，arr2[0]为键值，arr2[1]为对应的价值
if (arr2[0]===userId) {
这个。loginform。userid=arr 2[1]；
} else if (arr2[0]===password) {
这个。loginform。密码=base64。decode(arr 2[1])；//base64解密
this.checked=true
}
}
}
},
},
};
总结
到此这篇关于某视频剪辑软件实现登录记住账号密码功能的思路与过程的文章就介绍到这了，更多相关某视频剪辑软件实现登录记住账号密码内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。