Vue实现登录记住密码

前提：
登录时记住密码可以方便用户退出后再次快速操作，一般使用Cookie进行存储用户名和密码，思路如下:
1.先判断用户在登录时是否勾选记住密码，如果勾选，向cookie中储存登录信息，如果没有勾选，储存的信息为空

 setUserInfo() {var vm = this;// 判断用户是否勾选记住密码，如果勾选，向cookie中储存登录信息，// 如果没有勾选，储存的信息为空if (vm.ruleForm.checked) {vm.setCookie("userName", vm.ruleForm.userName);vm.setCookie("userPwd", vm.ruleForm.userPwd);vm.setCookie("checked", vm.ruleForm.checked);} else {vm.setCookie("userName", "");vm.setCookie("userPwd", "");}},

2.编写从cookie中存取用户信息的方法

  // 获取cookiegetCookie: function(key) {if (document.cookie.length > 0) {var start = document.cookie.indexOf(key + '=')if (start !== -1) {start = start + key.length + 1var end = document.cookie.indexOf(';', start)if (end === -1) end = document.cookie.lengthreturn unescape(document.cookie.substring(start, end))}}return ''},// 保存cookiesetCookie(cName, value, expiredays) {var exdate = new Date()exdate.setDate(exdate.getDate() + expiredays)document.cookie = cName + '=' + decodeURIComponent(value) +((expiredays == null) ? '' : ';expires=' + exdate.toGMTString())}

3.在点击登录按钮，向后端发送请求时调用setUserInfo（）方法
4.最后，还需要在vue生命周期的created（）{}方法中初始化用户名和密码，以便显示在登录页面上

 created() {var vm = this;// 在页面加载时从cookie获取登录信息let userName = vm.getCookie("userName");let userPwd = vm.getCookie("userPwd");// 如果存在赋值给表单，并且将记住密码勾选if (userName) {vm.ruleForm.userName = userName;vm.ruleForm.userPwd = userPwd;vm.ruleForm.checked = true;}},

5.到此，记住密码功能就实现啦~

Vue实现登录记住密码相关推荐

Vue实现登录记住账号密码功能的思路与过程
文章来源: 学习通http://www.bdgxy.com/ 目录实现思路这里有三种方法来存储账号密码: 功能界面记住账号密码功能的具体实现密码加密 localStorage cookies ...
vue项目实现记住密码到cookie功能
vue项目实现记住密码到cookie功能(附源码) 实现功能: 1.记住密码勾选,点登陆时,将账号和密码保存到cookie,下次登陆自动显示到表单内 2.不勾选,点登陆时候则清空之前保存到cookie ...
html 记住密码自动登陆,JavaScript登录记住密码操作(超简单代码)
废话不多说了,直接给大家贴代码了,具体代码如下所示: 记住密码记住密码 window.onload = function(){ var oForm = document.getElementById ...
vue+elementUl实现登录记住密码功能
效果思路: 采用cookie保存账户和密码. 如果勾选了记住密码,将用户名和密码保存在cookie中,设置cookie中数据保存的时间,过期清除cookie保存的值, 每次新登录的时候,获取本地保存 ...
android 自动登录机制,Android登录记住密码以及自动登录的实现
记住密码以及自动登录的实现主要依赖于SharedPreferences类的使用,SharedPreferences是一个轻量级的存储类,用于存储一些小数据,比如登录账号密码以及状态信息等. 本文章只针 ...
Android SharedPreferences登录记住密码
SharedPreferences是Android中存储简单数据的一个工具类.可以想象它是一个小小的Cookie,它通过用键值对的方式把简单数据类型(boolean.int.float.long和S ...
Cookie实现用户登录记住密码,实现自动登录
什么是Cookie 在java是一个类,一对键和值组成,键值都是字符串类型,每个cookie只能保存一对键和值.每个cookie只能保存最大4K的数据案列应用保存用户名和密码在浏览器端,Cooki ...
php 登录记住密码,php 记住密码自动登录
做网站的时候会碰到记住密码,下次自动登录,一周内免登陆,一个月内免登陆这种需求.这种功能一般通过cookie来实现的.用户在登陆的时候,如果选择了记住密码或者一周内免登陆等这个选项的时候,则在用户成功 ...
java用户登录记住密码_java项目中登陆时记住密码
1.在登陆的时候记住密码,不知自动登陆: 2.登陆页面,填写用户名,密码,点击记住密码,下次进入登陆页面的时候,填写同样的用户名,密码自动填充(在不一次会话的情况下也就是说在不关闭浏览器的情况下): ...
php登陆页添加记住密码选项,PHP 实现登录记住密码
QQ群:121938294 form页面用户名密码记住密码用户信息 session_start(); function p($arr){ echo " "; print_r ...

Vue实现登录记住密码

Vue实现登录记住密码

Vue实现登录记住密码相关推荐

最新文章

热门文章