vue中使用cookie实现记住密码功能

实现功能:
1.勾选记住密码,点登录时,将账号信息保存到cookie,下次进入页面账号信息自动显示到表单内
2.不勾选记住密码,点登录时候清空之前保存到cookie的账号信息,下次进入页面账号信息需要手动再次输入。
在这里插入图片描述
实现思路:
通过存、取、删cookie中的值实现的。
1.取:每次进入登录页,先去读取cookie中账号信息,如果浏览器的cookie中有账号信息,就自动填充到登录输入框中
2.存:存cookie是在登录成功之后,判断当前用户是否勾选了记住密码,如果勾选了,则把账号信息存到cookie当中。
3.删:执行cookie的setCookie方法清空账户信息。

相关代码:
html在这里插入图片描述
js部分
user对象
在这里插入图片描述
点击登录执行此方法 handleLogin() 判断是否输入账户信息,账户信息输入后调用后端登录接口signIn(),登录成功后执行记住密码方法(signln是接口统一封装后的方法)
在这里插入图片描述
执行记住密码功能(存cookie)
在这里插入图片描述
账号信息自动填充到登录输入框中(取cookie)
在这里插入图片描述

  • 0
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值