个人中心
文章发布
退出
作者热门文章
- ubuntu12.04环境下使用kvm ioctl接口实现最简单的虚拟机
- Ubuntu 通过无线网络安装Ubuntu Server启动系统后连接无线网络的方法
- 在Ubuntu上搭建网桥的方法
- ubuntu 虚拟机上网方式及相关配置详解
25
4
CFSDN坚持开源创造价值，我们致力于搭建一个资源共享平台，让每一个IT人在这里找到属于你的精彩世界.
这篇CFSDN的博客文章Vue+element+cookie记住密码功能的简单实现方法由作者收集整理，如果你对这篇文章有兴趣，记得点赞哟.
实现功能:
1、登录时勾选记住密码，用cookie保存账号和密码并对密码进行两次加密处理（纯前端），下次登录自动输入账号密码 。
2、登录时不勾选，清空cookie，下次登录需要输入 。
效果图:
============================================================================================================================================================================================= 。
Html 。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
|
<
div
class
=
"login-form-item"
>
<
el-form
:model
=
"ValidateForm"
ref
=
"ValidateForm"
label-width
=
"100px"
class
=
"demo-ruleForm"
>
<
el-form-item
prop
=
"username"
:rules="[{ required: true, message: '用户名不能为空'}
]">
<
span
><
i
class
=
"el-icon-user"
></
i
></
span
><
el-input
type
=
"username"
v-model.number
=
"ValidateForm.username"
autocomplete
=
"off"
clearable
placeholder
=
"用户名"
></
el-input
>
</
el-form-item
>
<
br
>
<
el-form-item
prop
=
"password"
:rules="[{ required: true, message: '密码不能为空'},
]">
<
span
><
i
class
=
"el-icon-lock"
></
i
></
span
><
el-input
type
=
"password"
v-model.number
=
"ValidateForm.password"
autocomplete
=
"off"
clearable show-password
placeholder
=
"密码"
></
el-input
>
</
el-form-item
>
<
br
>
<
el-form-item
prop
=
"sidentify"
:rules="[
{ required: true, message: '验证码不能为空'},]"
>
<
el-row
class
=
"sidentify"
>
<
el-col
:span
=
"21"
>
<
el-input
type
=
"age"
v-model
=
"ValidateForm.sidentify"
autocomplete
=
"off"
placeholder
=
"验证码"
></
el-input
>
</
el-col
>
<
el-col
:span
=
"3"
class
=
"sidentify sidentify-img"
>
<
sidentify
:changeCode.sync
=
'identifyCode'
ref
=
"switchSidentify"
></
sidentify
>
</
el-col
>
</
el-row
>
</
el-form-item
>
<
el-form-item
>
<
el-checkbox
v-model
=
"checked"
class
=
"sidentify"
>记住密码</
el-checkbox
>
</
el-form-item
>
<
el-form-item
>
<
el-button
type
=
"primary"
@
click
=
"submitForm('ValidateForm')"
class
=
"login-btn"
>登录</
el-button
>
</
el-form-item
>
</
el-form
>
</
div
>
|
加密方法我用的base64和CryptoJS 大家记得去下载 。
js部分:
登录 。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
|
// 登录
submitForm(formName) {
this
.$refs[formName].validate((valid) => {
if
(valid) {
let username=
this
.ValidateForm.username;
let pwd=
this
.ValidateForm.password;
let sidentify=
this
.ValidateForm.sidentify;
// 验证码通过
if
(sidentify ==
this
.identifyCode){
this
.request.post(
this
.api.login.logindo,{username:username,pwd:pwd}).then((res)=>{
console.log(res);
if
(res.data.code == 200){
this
.$message({
message :
'登录成功！'
,
type :
'success'
})
//调用check选中方法
this
.checkedPwd(username,pwd)
this
.$router.push({name:
'Home'
})
}
else
{
this
.$message({
message :
'账号或密码错误，请重新输入！'
,
type :
'error'
})
//清空
this
.resetForm(
'ValidateForm'
)
//刷新验证码
this
.$refs.switchSidentify.changeCode()
}
})
}
else
{
this
.$message({
message :
'验证码输入错误，请重新输入！'
,
type :
'error'
})
this
.$refs.switchSidentify.changeCode()
this
.resetForm(
'ValidateForm'
)
}
}
else
{
return
false
;
}
});
},
|
check方法:
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
checkedPwd(username,pwd){
// 记住密码进行cookie存储和密码加密
if
(
this
.checked){
// base64 加密
let base64Pwd=Base64.encode(pwd);
// Encrypt 加密
let cryptoJsPwd=CryptoJS.AES.encrypt(base64Pwd,key).toString()
// 账号密码保存天数
this
.setCookie(username,cryptoJsPwd,7)
}
else
{
// 清空
this
.clearCookie()
}
},
|
设置读取和清空cookie 。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
|
// 设置cookie
setCookie(c_name, c_pwd, exdays) {
var
exdate =
new
Date();
// 获取时间
exdate.setTime(exdate.getTime() + 24 * 60 * 60 * 1000 * exdays);
// 保存的天数
// 字符串拼接cookie
window.document.cookie =
"username"
+
"="
+ c_name +
";path=/;expires="
+ exdate.toGMTString();
window.document.cookie =
"password"
+
"="
+ c_pwd +
";path=/;expires="
+ exdate.toGMTString();
},
// 读取cookie
getCookie:
function
() {
if
(document.cookie.length > 0) {
//checked为true
this
.checked=
true
var
arr = document.cookie.split(
'; '
);
for
(
var
i = 0; i < arr.length; i++) {
var
arr2 = arr[i].split(
'='
);
if
(arr2[0] ==
'username'
) {
this
.ValidateForm.username = arr2[1];
}
else
if
(arr2[0] ==
'password'
) {
// Decrypt 解密
let bytes = CryptoJS.AES.decrypt(arr2[1],key)
let originalText=bytes.toString(CryptoJS.enc.Utf8)
// base64解密
let pwd=Base64.decode(originalText)
this
.ValidateForm.password = pwd;
}
}
}
},
// 清除cookie
clearCookie:
function
() {
this
.setCookie(
""
,
""
, -1);
// 修改2值都为空，天数为负1天就好了
},
|
一定要创建后读取cookie 。
|
1
2
3
|
created () {
this
.getCookie()
},
|
总结 。
到此这篇关于Vue+element+cookie记住密码功能的简单实现方法文章就介绍到这了,更多相关Vue+element+cookie记住密码功能内容请搜索我以前的文章或继续浏览下面的相关文章希望大家以后多多支持我！ 。
原文链接：https://blog.csdn.net/qq_40788898/article/details/108662280 。
最后此篇关于Vue+element+cookie记住密码功能的简单实现方法的文章就讲到这里了,如果你想了解更多关于Vue+element+cookie记住密码功能的简单实现方法的内容请搜索CFSDN的文章或继续浏览相关文章，希望大家以后支持我的博客！ 。
25
4
0
背景: 我最近一直在使用 JPA，我为相当大的关系数据库项目生成持久层的轻松程度给我留下了深刻的印象。 我们公司使用大量非 SQL 数据库，特别是面向列的数据库。我对可能对这些数据库使用 JPA 有一
我已经在我的 maven pom 中添加了这些构建配置，因为我希望将 Apache Solr 依赖项与 Jar 捆绑在一起。否则我得到了 SolarServerException: ClassNotF
interface ITurtle { void Fight(); void EatPizza(); } interface ILeonardo : ITurtle {
我希望可用于 Java 的对象/关系映射 (ORM) 工具之一能够满足这些要求: 使用 JPA 或 native SQL 查询获取大量行并将其作为实体对象返回。 允许在行(实体)中进行迭代，并在对当前
好像没有，因为我有实现From for 的代码, 我可以转换 A到 B与 .into() , 但同样的事情不适用于 Vec .into()一个Vec . 要么我搞砸了阻止实现派生的事情，要么这不应该发
在 C# 中，如果 A 实现 IX 并且 B 继承自 A ，是否必然遵循 B 实现 IX？如果是，是因为 LSP 吗？之间有什么区别吗: 1. Interface IX; Class A : IX;
就目前而言，这个问题不适合我们的问答形式。我们希望答案得到事实、引用资料或专业知识的支持，但这个问题可能会引发辩论、争论、投票或扩展讨论。如果您觉得这个问题可以改进并可能重新打开，visit the
我正在阅读标准haskell库的(^)的实现代码: (^) :: (Num a, Integral b) => a -> b -> a x0 ^ y0 | y0 a -> b ->a expo x0
我将把国际象棋游戏表示为 C++ 结构。我认为，最好的选择是树结构(因为在每个深度我们都有几个可能的移动)。 这是一个好的方法吗？ struct TreeElement{ SomeMoveType
我正在为用户名数据库实现字符串匹配算法。我的方法采用现有的用户名数据库和用户想要的新用户名，然后检查用户名是否已被占用。如果采用该方法，则该方法应该返回带有数据库中未采用的数字的用户名。 例子: “贾
我正在尝试实现 Breadth-first search algorithm , 为了找到两个顶点之间的最短距离。我开发了一个 Queue 对象来保存和检索对象，并且我有一个二维数组来保存两个给定顶点
我目前正在 ika 中开发我的 Python 游戏，它使用 python 2.5 我决定为 AI 使用 A* 寻路。然而，我发现它对我的需要来说太慢了(3-4 个敌人可能会落后于游戏，但我想供应 4-
我正在寻找 Kademlia 的开源实现C/C++ 中的分布式哈希表。它必须是轻量级和跨平台的(win/linux/mac)。 它必须能够将信息发布到 DHT 并检索它。 最佳答案 OpenDHT是
我在一本书中读到这一行:-“当我们要求 C++ 实现运行程序时，它会通过调用此函数来实现。” 而且我想知道“C++ 实现”是什么意思或具体是什么。帮忙!？ 最佳答案 “C++ 实现”是指编译器加上链接
我正在尝试使用分支定界的 C++ 实现这个背包问题。此网站上有一个 Java 版本:Implementing branch and bound for knapsack 我试图让我的 C++ 版本打印
在很多情况下，我需要在 C# 中访问合适的哈希算法，从重写 GetHashCode 到对数据执行快速比较/查找。 我发现 FNV 哈希是一种非常简单/好/快速的哈希算法。但是，我从未见过 C# 实现的
目录 LRU缓存替换策略 核心思想 不适用场景 算法基本实现 算法优化
1. 绪论 在前面文章中提到 空间直角坐标系相互转换 ，测绘坐标转换时，一般涉及到的情况是：两个直角坐标系的小角度转换。这个就是我们经常在测绘数据处理中，WGS-84坐标系、54北京坐标系
在软件开发过程中，有时候我们需要定时地检查数据库中的数据，并在发现新增数据时触发一个动作。为了实现这个需求，我们在 .Net 7 下进行一次简单的演示. PeriodicTimer .
二分查找 二分查找算法，说白了就是在有序的数组里面给予一个存在数组里面的值key，然后将其先和数组中间的比较，如果key大于中间值，进行下一次mid后面的比较，直到找到相等的，就可以得到它的位置。
我是一名优秀的程序员,十分优秀！