前端记住密码功能
来源:互联网 发布:无线鼠标品牌知乎 编辑:程序博客网 时间:2024/05/22 04:29
上周给运营系统补了个记住密码的功能,好像很容易的需求啊,还真费了不少劲,补充了不少cookie方面的知识~特地总结下!
大体思路就是通过存/取/删cookie实现的;每次进入登录页,先去读取cookie,如果浏览器的cookie中有账号信息,就自动填充到登录框中,存cookie是在登录成功之后,判断当前用户是否勾选了记住密码,如果勾选了,则把账号信息存到cookie当中,效果图如下:
浏览器中的cookie信息如下图,注意这里的cookie的expire/Max-Age过期时间,这个时间是格林尼治标准时间GMT,世界统一的时间,GMT+8小时就是北京时间,初中地理没学好,特地去查了下!!
实现代码:
html
<template> <div class="login-wrapper"> <form class="form-signin" role="form"> <h2 class="form-signin-heading">点播系统</h2> <input class="form-control" v-model="userName" v-on:keydown="doLogin($event)" placeholder="用户名" required autofocus> <input type="password" class="form-control" v-model="passWord" v-on:keydown="doLogin($event)" placeholder="Password"> <div class="checkbox remember-password-container"> <input type="checkbox" value="remember-me" v-model="rememberPassword" id="remember-password-checkbox" v-on:click="doRememberPassword($event)"> <label for="remember-password-checkbox"> Remember me </label> </div> <div class="btn btn-lg btn-primary btn-block" v-on:click="doLogin()">Sign in</div> </form> </div></template>
登录处理逻辑js
export default { // name: 'component2', data () { return { userName: "", passWord: "", rememberPassword: false } }, // 相当于init doAjax beforeCreate() { // console.log('login页面 加载完成!') }, // 相当于ready 模板编译挂载之后 mounted: function() { //读取cookie中的账号信息,如果有accountInfo的话,则说明该用户之前勾选了记住密码的功能,则需要自动填上账号密码 this.loadAccountInfo(); }, methods: { doLogin: function(event){ var mySelf = this; const router = this.$router; // console.log(router) // router.go(); // router.push({path:'/index'}) // console.log(pars.domain) var mySelf = this; var userName = mySelf.userName; var userPwd = mySelf.passWord; //记住密码checkbox的勾选状态 和账号信息的字符串 var rememberStatus = mySelf.rememberPassword; var accountInfo = ""; accountInfo = userName + "&" + userPwd; if (event && event.type == 'keydown' && event.keyCode != 13) { return; } //console.log("用户名:" + userName) //console.log("密码:" + userPwd) if (userName == ""){ util.showDialog('error','用户名不能为空!'); return; } if (userPwd == ""){ util.showDialog('error','密码不能为空!'); return; } $.get( pars.domain + "xxx" + "&t=" + (new Date).getTime(), function(ret) { if (ret.code == 0) { //如果登录成功,则把账号信息保存在cookie当中 if (rememberStatus){ console.log("勾选了记住密码,现在开始写入cookie"); util.setCookie('accountInfo',accountInfo,1440*3); } else{ console.log("没有勾选记住密码,现在开始删除账号cookie"); util.delCookie('accountInfo'); } // 若为本地环境 则手写cookie if (window.location.href.indexOf('localhost') != -1){ util.setCookie('token','zhaopeng_58e0cbbea951f0e79fafcee80da522b8',1440); } // console.log(window.location.href) console.log('登录的返回值为0'); router.push({path:'/'}); } else { util.showDialog('error','账号名或密码错误!'); } }, "json"); }, doRememberPassword: function(event){ let mySelf = this; let rememberStatus = mySelf.rememberPassword; // event.preventDefault(); mySelf.rememberPassword = !rememberStatus; //如果去掉勾选,则删掉cookie // if (!rememberStatus){ // } // mySelf.rememberPassword = false; }, loadAccountInfo: function(){ let mySelf = this; //zhaopeng&A15hOsu8YeGnCsjb let accountInfo = util.getCookie('accountInfo'); //如果cookie里没有账号信息 if(Boolean(accountInfo) == false){ console.log('cookie中没有检测到账号信息!'); return false; } else{ //如果cookie里有账号信息 console.log('cookie中检测到账号信息!现在开始预填写!'); let userName = ""; let passWord = ""; let index = accountInfo.indexOf("&"); userName = accountInfo.substring(0,index); passWord = accountInfo.substring(index+1); mySelf.userName = userName; mySelf.passWord = passWord; mySelf.rememberPassword = true; } } }}操作cookie逻辑js
// 设置cookiesetCookie: function(c_name,value,expiremMinutes){ var exdate = new Date(); exdate.setTime(exdate.getTime() + expiremMinutes * 60 * 1000); document.cookie= c_name + "=" + escape(value)+((expiremMinutes==null) ? "" : ";expires="+exdate.toGMTString());},// 读取cookiegetCookie: function(c_name){ if (document.cookie.length>0) { var c_start=document.cookie.indexOf(c_name + "="); if (c_start!=-1) { c_start=c_start + c_name.length+1; var c_end=document.cookie.indexOf(";",c_start); if (c_end==-1) c_end = document.cookie.length return unescape(document.cookie.substring(c_start, c_end)) } } return "" },// 删除cookiedelCookie: function(c_name){ var exp = new Date(); exp.setTime(exp.getTime() - 1); var cval = this.getCookie(c_name); if(cval!=null){ document.cookie = c_name + "=" + cval + ";expires=" + exp.toGMTString(); }},
2 0
- 前端记住密码功能
- 前端记住密码功能
- 实现前端md5加密与记住用户名密码功能
- js记住密码功能
- Android 记住密码功能
- 记住密码功能
- SpringMVC记住密码功能
- 模拟记住密码功能
- android :记住密码功能
- CheckBox记住密码功能
- SpringMVC记住密码功能
- 实现记住密码功能
- mvc记住密码功能
- Android 记住密码功能
- javaweb实现记住密码功能
- C#记住密码功能实现
- SharedPreference实现记住密码功能
- sharepreference实现记住密码功能
- 关于JNI的代码格式以及JNI的数据类型
- 数组的相关运算
- LINUX 20个常用命令
- win7,win8,win10环境下如何使用dnw!
- OJ:line point 5
- 前端记住密码功能
- Installation failed with message INSTALL_FAILED_NO_MATCHING_ABIS.
- oracle根据逗号分割字符串
- 10本Java网站开发必看书籍,大神级别必修书籍,吐血推荐!!!
- HDFS
- 51nod 1278
- SSH框架依赖分析
- add jars和add external jars有什么区别?
- php+jquery+ajax+json的一个最简单实例