个人中心
文章发布
退出
作者热门文章
- ubuntu12.04环境下使用kvm ioctl接口实现最简单的虚拟机
- Ubuntu 通过无线网络安装Ubuntu Server启动系统后连接无线网络的方法
- 在Ubuntu上搭建网桥的方法
- ubuntu 虚拟机上网方式及相关配置详解
29
4
CFSDN坚持开源创造价值，我们致力于搭建一个资源共享平台，让每一个IT人在这里找到属于你的精彩世界.
这篇CFSDN的博客文章vue登录页实现使用cookie记住7天密码功能的方法由作者收集整理，如果你对这篇文章有兴趣，记得点赞哟.
项目的登录页中，会有要求记住7天密码的功能，本篇文章记录一下写法，主要是使用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
|
<el-form
ref=
"form"
:model=
"form"
label-width=
"80px"
label-position=
"top"
@submit.native.prevent
>
<el-form-item label=
"用户名/账号"
>
<div class=
"userError"
>
<el-input
size=
"mini"
v-model.trim=
"form.userName"
clearable
></el-input>
</div>
</el-form-item>
<el-form-item label=
"密码"
>
<div class=
"pwdError"
>
<el-input
size=
"mini"
v-model.trim=
"form.loginPwd"
clearable
show-password
></el-input>
</div>
</el-form-item>
<el-checkbox label=
"记住账号"
v-model=
"isRemember"
></el-checkbox>
<el-button native-type=
"submit"
size=
"mini"
@click=
"loginPage"
>登录</el-button
>
</el-form>
|
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
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
|
export
default
{
name:
"login"
,
data() {
return
{
form: {
userName:
''
,
loginPwd:
''
,
},
isRemember:
false
,
};
},
mounted() {
// 第1步，在页面加载的时候，首先去查看一下cookie中有没有用户名和密码可以用
this
.getCookie();
},
methods: {
/* 第3步，当用户执行登录操作的时候，先看看用户名密码对不对
若不对，就提示登录错误
若对，就再看一下用户有没有勾选记住密码
若没勾选，就及时清空cookie，回到最初始状态
若勾选了，就把用户名和密码存到cookie中并设置7天有效期，以供使用
（当然也有可能是更新之前的cookie时间）
*/
async loginPage() {
// 发请求看看用户输入的用户名和密码是否正确
const res = await
this
.$api.loginByUserName(
this
.form)
if
(res.isSuccess ==
false
){
this
.$message.error(
"登录错误"
)
}
else
{
const self =
this
;
// 第4步，若复选框被勾选了，就调用设置cookie方法，把当前的用户名和密码和过期时间存到cookie中
if
(self.isRemember ===
true
) {
// 传入账号名，密码，和保存天数（过期时间）3个参数
// 1/24/60 测试可用一分钟测试，这样看着会比较明显
self.setCookie(
this
.form.userName,
this
.form.loginPwd, 1/24/60);
// self.setCookie(this.form.userName, this.form.loginPwd, 7); // 这样就是7天过期时间
}
// 若没被勾选就及时清空Cookie，因为这个cookie有可能是上一次的未过期的cookie，所以要及时清除掉
else
{
self.clearCookie();
}
// 当然，无论用户是否勾选了cookie，路由该跳转还是要跳转的
this
.$router.push({
name:
"project"
,
});
}
},
// 设置cookie
setCookie(username, password, exdays) {
var
exdate =
new
Date();
// 获取当前登录的时间
exdate.setTime(exdate.getTime() + 24 * 60 * 60 * 1000 * exdays);
// 将当前登录的时间加上七天，就是cookie过期的时间，也就是保存的天数
// 字符串拼接cookie,因为cookie存储的形式是name=value的形式
window.document.cookie =
"userName"
+
"="
+ username +
";path=/;expires="
+ exdate.toGMTString();
window.document.cookie =
"userPwd"
+
"="
+ password +
";path=/;expires="
+ exdate.toGMTString();
window.document.cookie =
"isRemember"
+
"="
+
this
.isRemember +
";path=/;expires="
+ exdate.toGMTString();
},
// 第2步，若cookie中有用户名和密码的话，就通过两次切割取出来存到form表单中以供使用，若是没有就没有
getCookie:
function
() {
if
(document.cookie.length > 0) {
var
arr = document.cookie.split(
"; "
);
//因为是数组所以要切割。打印看一下就知道了
// console.log(arr,"切割");
for
(
var
i = 0; i < arr.length; i++) {
var
arr2 = arr[i].split(
"="
);
// 再次切割
// console.log(arr2,"切割2");
// // 判断查找相对应的值
if
(arr2[0] ===
"userName"
) {
this
.form.userName = arr2[1];
// 转存一份保存用户名和密码
}
else
if
(arr2[0] ===
"userPwd"
) {
this
.form.loginPwd = arr2[1];
//可解密
}
else
if
(arr2[0] ===
"isRemember"
) {
this
.isRemember = Boolean(arr2[1]);
}
}
}
},
// 清除cookie
clearCookie: fu
this
.setCookie(
""
,
""
, -1);
// 清空并设置天数为负1天
},
},
};
|
cookie存储图示 。
其实也很简单，就是设置一个过期时间，也就是cookie的失效的日期，当然中间需要有一些格式的处理，数据的加工.
补充，cookie是存在浏览器中，浏览器安装在电脑中，比如安装在C盘，所以cookie是存在C盘中的某个文件夹下，那个文件夹不仅有cookie，还有localStorage和sessionStorage和别的，具体哪个文件夹大家可以自己动手找一找。其实所谓的本地存储其实就是存在自己的电脑上.
到此这篇关于vue登录页实现使用cookie记住7天密码功能的方法的文章就介绍到这了,更多相关vue登录页cookie记住密码内容请搜索我以前的文章或继续浏览下面的相关文章希望大家以后多多支持我！ 。
原文链接：https://juejin.cn/post/6929475332240048135 。
最后此篇关于vue登录页实现使用cookie记住7天密码功能的方法的文章就讲到这里了,如果你想了解更多关于vue登录页实现使用cookie记住7天密码功能的方法的内容请搜索CFSDN的文章或继续浏览相关文章，希望大家以后支持我的博客！ 。
29
4
0
在我的主要组件中，我有: mounted() { window.$cookie.set('cookie_name', userName, expiringTime); }, 这会产生以下错误:
我正在学习 cookie，并且我想知道在编写依赖 cookie 来存储状态的 Web 应用程序时浏览器的支持情况。 对于每个域/网站，可以向浏览器发送多少个 Cookie，大小是多少？ 如果发送并存储
我已经为我的站点设置了一个 cdn，并将其用于 css、js 和图像。 网站只提供那些文件 我的问题是 firefox 中的页面速度插件对于我的图片请求，我看到了一个 cookie Cookie fc
在阅读了 Internet 上的文档和帖子后，我仍然无法解决 jMeter 中的 Cookie Manager 问题。 我在响应头中得到了 sid ID，但它没有存储在我的 cookie 管理器中。
我正在 Node.JS 中处理一些类似浏览器的 cookie 处理，想知道从 NodeJS and HTTP Client - Are cookies supported? 开始对这段代码进行扩展到什
我正在此堆栈上构建自托管 Web 服务器:欧文南希网络 API 2 我正在使用 Katana 的 Microsoft.Owin.Security.Cookies 进行类似表单的身份验证。我得到了 Se
我有一个从另一个网站加载资源的网站。我已经能够确定: 第三方网站在用户的浏览器上放置 cookie。 如果我在浏览器设置中禁用第三方 cookie，第三方网站将无法再在浏览器上放置 cookie。 该
关闭。这个问题是off-topic .它目前不接受答案。 想改善这个问题吗？ Update the question所以它是 on-topic对于堆栈溢出。 9年前关闭。 Improve this q
我正在使用 python mechanize 制作登录脚本。我已经读到 Mechanize 的 Browser() 对象将自动处理 cookie 以供进一步请求。 我怎样才能使这个 cookie 持久
我正在尝试在 www.example.com 和 admin.other.example.com 之间共享 cookie 我已经能够使其与 other.example.com 一起使用，但是无法访问子
我设置了一个域为 .example.com 的 cookie .它适用于我网站上的每个一级子域，应该如此。 但是，它不适用于 n 级子域，即 sub.subdomain.example.com和 to
我想让用户尽可能长时间地登录。 我应该使用什么？ 普通 cookies 持久性 cookie 快闪 cookies ip地址 session 或这些的某种组合？ 最佳答案 我认为 Flash cook
如果给定的 Web 服务器只能读取其域内设置的 cookie，那么 Internet 广告商如何从其网络外的网站跟踪用户的 Web 流量？ 是否存在某种“supercookie”全局广告系统，允许广告
我知道一个 cookie 可以容纳多少数据是有限制的，但是我们可以设置多少个 cookie 有限制吗？ 最佳答案 来自 http://www.ietf.org/rfc/rfc2109.txt Prac
如果我拒绝创建 cookie，则在我的浏览器中创建名称为 __utma、__utmb 等的 cookie。我认为这个 cookie 是用于谷歌分析的。任何人都知道谷歌如何创建这个 cookie，即使浏
我有一个生产环境和一个登台环境。我想知道我是否可以在环境之间沙箱 cookie。我的设置看起来像 生产 domain.com - 前端 SPA api.domain.com - 后端节点 分期 sta
我想知道浏览器(即 Firefox )和网站的交互。 当我将用户名和密码提交到登录表单时，会发生什么？ 我认为该网站向我发送了一些 cookie，并通过检查这些 cookie 来授权我。 cookie
我在两个不同的域中有两个网络应用程序 WebApp1 和 WebApp2。 我在 HttpResponse 的 WebApp1 中设置 cookie。 如何从 WebApp2 中的 HttpReque
我正在使用Dartium“Version 34.0.1847.0 aura(264987)”，并从Dart创建一个websocket。但是，如果不是httpOnly，我的安全 session cook
我从 Headfirst Javascript 书中获取了用于 cookie 的代码。但由于某种原因，它不适用于我的浏览器。我主要使用chrome和ff，并且我在chrome中启用了本地cookie。
我是一名优秀的程序员,十分优秀！