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

最新推荐文章于 2023-09-25 21:48:22 发布
最新推荐文章于 2023-09-25 21:48:22 发布
阅读量1.9k 收藏 27
点赞数 6
分类专栏： ❤️❤️--Javascript ❤️❤️--vue2核心技术栈 文章标签： 设置cookie记住密码 vue实现登录记住密码 cookie记住用户名密码
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_41579104/article/details/118760647
版权

功能：设置cookie保存时间为7天，关闭浏览器cookie不会消失，否则不设置过期时间cookie会默认关闭浏览器自动清除的，如果设置了cookie过期时间，关闭浏览器，cookie仍被清空了，那可能是浏览器设置的原因，记得把下面按钮关闭

 效果：

设置cookie:

将用户名，密码，以及保存的天数，以及记住密码的check按钮的布尔值存入cookie

了解本专栏 订阅专栏 解锁全文 超级会员免费看
suoh's Blog
关注
  • 6
    点赞
  • 踩
  • 27
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
订阅专栏
vue项目实现记住密码到cookie功能示例(附源码)
08-28
本篇文章主要介绍了vue项目实现记住密码到cookie功能示例(附源码)，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
Vue中登录页面记住密码，并使用crypto-js加密
~~
05-17 3976
主要用到js-cookie来存储用户名和密码，关于js-cookie介绍：https://blog.csdn.net/qq_40323256/article/details/116838848 一、下载js-cookie cnpm i -S js-cookie 二、main.js中全局引入 import Cookies from 'js-cookie' Vue.prototype.$cookie = Cookies; 三、使用 <el-checkbox v-model="rem..
前端vue+elementUI如何实现记住密码功能
10-14
主要给大家介绍了关于vue+elementUI如何实现记住密码功能的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
vue登录登出，解决跨域及cookies问题
weixin_51172484的博客
10-26 3635
vue跨域及cookie问题
vue 后台管理系统登录 记住密码 功能（Cookies实现）
逆风优雅的博客
08-25 563
【代码】vue 后台管理系统登录 记住密码 功能（Cookies实现）
vue中cookies的使用
m0_61476911的博客
08-24 8249
使用js-cookie操作cookies里面的数据
vue实现登录，记住密码功能（cookie）
ur home
08-05 722
1. auth工具类 import Cookies from 'js-cookie' export function getCookie(key: string) { return Cookies.get(key) } export function setCookie(key: string, value: string, expires: number) { return Cookies.set(key, value, { expires: expires }) } export...
Vue+element+cookie记住密码功能的简单实现方法
10-14
主要给大家介绍了Vue+element+cookie记住密码功能的简单实现方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
vue登录页-记住密码功能
10-05
vue登录页-记住密码功能 1.下载jsencrypt 加密解密插件 npm install jsencrypt --dev 2.引用src-utils -jsencrypt.js文件， 3.登录页先引用-代码如下 import Cookies from 'js-cookie'//cook引用 2021-08-09 ...
使用cookie+localStorage+vuex实现页面登陆
kerelee_li的博客
09-03 2584
使用cookie+localStorage+vuex实现页面登陆 要实现一个登陆页面，具体要求有： 1.匹配用户名和密码正确，点击进入系统，否则弹出提示用户名或密码不正确。 2.登陆成功后，3天时间内可以直接进入，不需重新登陆，直接进入系统。（使用vuex和cookie保存登陆状态，使用cookie控制时间） 3.登陆过的用户，下次登陆时输入框中保存了之前的用户名，即使在3天之后，输入框中...
SpringBoot+Vue 实现简单的：登录、注册、查看详情、商品页面、购物车功能
最新发布
RuanFun的博客
09-25 8600
破解主要难点：如何定义cookie存储用户登录信息，提取cookie中数据，封装前端重复性代码，根据登录与否状态显示不同界面，实现验证码功能.....
使用Cookie实现七天免登录
热门推荐
var_Xu的博客
04-16 2万+
实现效果： 用户打开页面，输入用户名和密码后点击登录，如果不勾选“七天免登录”框，则浏览器不会保存用户数据，反之则会保存用户数据，再次刷新之后浏览器会自动写入用户名以及密码。 HTML布局： <body> 用户名：<input type="text" / id="dx"><br> 密码：<input type="password" / id...
实现Vue登录和权限控制及注意事项
weixin_45239190的博客
03-10 1916
实现登录页面以及不同权限下显示对应菜单
Vue如何读取cookie实现路由守卫（检查用户登录状态）
weixin_45745641的博客
12-19 4917
文章目录前言1.登录请求记录cookie2. 获取cookie的方法3.路由守卫做出判断效果演示 前言 一般实现路由守卫，判断用户的登录状态使用token和cookie验证两种方法，之前出过一期利用token实现路由守卫的方法见此链接 Vue实现路由导航守卫(检测token，强制跳转)，这次项目后端是给我提供的cookie验证，写到这里就记录一下，希望能帮助到你们 1.登录请求记录cookie 一般来说，cookie的记录由后端来实现，我这里亦是如此，点击登录按钮发送登录请求正确，此时浏览器就有cookie
Vue项目实现记住密码功能
SpringCloudTest的博客
08-14 548
Vue项目实现记住密码功能 记住密码一般是记录在cookie中，设置一个过期时间，在过期时间之内用户的用户名和密码都保存在cookie中。 首先编写存入/取出信息cookie中的方法 // 设置cookie mounted() { this.getCookie(); }, methods: { setCookie(cname,cpwd,cdays) { //获取当前时间 var curDate = new Date(); //设置7天过期时间 curDate.setTi
vue项目登录记住密码
发育中的前端
08-12 870
登录记住密码的思路就是将账号密码存入cookie中，
Vue保持用户登录状态(各种token存储方式)
耕耘——从菜鸟到高手的蜕变
05-04 2478
目录在前端中，实现保持用户登录状态的方法有很多种，你通过可以存Cookie、Session、Token等信息来保持，不管后台向前端发送哪个我们要做的就是将这些信息存在在本地浏览器中，浏览器再次发送请求时，将设置了‘键'=‘值'的Cookie再次抛给服务器，服务器通过Cookie的。
vue中 登录页面记住密码功能怎么做
05-29
在Vue中实现登录页面记住密码功能的一般步骤如下： 1. 在登录页面的表单中添加一个“记住密码”的复选框。 2. 在用户勾选“记住密码”时，将用户名和密码存储在浏览器的localStorage或cookie中。 3. 在页面加载时，检查localStorage或cookie中是否存在用户名和密码，如果存在，则将它们填充到相应的表单中。 4. 在用户提交表单时，判断是否勾选了“记住密码”，如果勾选了，则将用户名和密码存储在localStorage或cookie中。 具体实现可以参考以下代码： ```html <!-- 登录页面 --> <template> <form @submit.prevent="login"> <label> 用户名： <input v-model="username" type="text"> </label> <br> <label> 密码： <input v-model="password" type="password"> </label> <br> <label> <input v-model="remember" type="checkbox"> 记住密码 </label> <br> <button type="submit">登录</button> </form> </template> <script> export default { data() { return { username: '', password: '', remember: false } }, mounted() { // 页面加载时，检查localStorage中是否有用户名和密码 const username = localStorage.getItem('username') const password = localStorage.getItem('password') if (username && password) { this.username = username this.password = password this.remember = true } }, methods: { login() { // 提交表单时，判断是否勾选了“记住密码” if (this.remember) { localStorage.setItem('username', this.username) localStorage.setItem('password', this.password) } else { localStorage.removeItem('username') localStorage.removeItem('password') } // 发送登录请求... } } } </script> ``` 在上面的代码中，我们使用了localStorage来存储用户名和密码。如果你想使用cookie来存储，则可以使用js-cookie库来操作cookie。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

suoh's Blog

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值