大体思路就是通过存/取/删cookie实现的;每次进入登录页,先去读取cookie,如果浏览器的cookie中有账号信息,就自动填充到登录框中,存cookie是在登录成功之后,判断当前用户是否勾选了记住密码,如果勾选了,则把账号信息存到cookie当中,效果图如下:
浏览器中的cookie信息如下图,注意这里的cookie的expire/Max-Age过期时间,这个时间是格林尼治标准时间GMT,世界统一的时间,GMT+8小时就是北京时间,初中地理没学好,特地去查了下!!
实现代码:
html
1 <template> 2 <div class="login-wrapper"> 3 <form class="form-signin" role="form"> 4 <h2 class="form-signin-heading">点播系统</h2> 5 <input class="form-control" v-model="userName" v-on:keydown="doLogin($event)" placeholder="用户名" required autofocus> 6 <input type="password" class="form-control" v-model="passWord" v-on:keydown="doLogin($event)" placeholder="Password"> 7 <div class="checkbox remember-password-container"> 8 <input type="checkbox" value="remember-me" v-model="rememberPassword" id="remember-password-checkbox" v-on:click="doRememberPassword($event)"> 9 <label for="remember-password-checkbox"> 10 Remember me 11 </label> 12 </div> 13 <div class="btn btn-lg btn-primary btn-block" v-on:click="doLogin()">Sign in</div> 14 </form> 15 </div> 16 </template>
登录处理逻辑js
1 export default { 2 // name: 'component2', 3 data () { 4 return { 5 userName: "", 6 passWord: "", 7 rememberPassword: false 8 } 9 }, 10 // 相当于init doAjax 11 beforeCreate() { 12 // console.log('login页面 加载完成!') 13 }, 14 // 相当于ready 模板编译挂载之后 15 mounted: function() { 16 //读取cookie中的账号信息,如果有accountInfo的话,则说明该用户之前勾选了记住密码的功能,则需要自动填上账号密码 17 this.loadAccountInfo(); 18 }, 19 methods: { 20 doLogin: function(event){ 21 22 var mySelf = this; 23 const router = this.$router; 24 // console.log(router) 25 // router.go(); 26 // router.push({path:'/index'}) 27 // console.log(pars.domain) 28 29 var mySelf = this; 30 var userName = mySelf.userName; 31 var userPwd = mySelf.passWord; 32 //记住密码checkbox的勾选状态 和账号信息的字符串 33 var rememberStatus = mySelf.rememberPassword; 34 var accountInfo = ""; 35 accountInfo = userName + "&" + userPwd; 36 37 if (event && event.type == 'keydown' && event.keyCode != 13) { 38 return; 39 } 40 41 //console.log("用户名:" + userName) 42 //console.log("密码:" + userPwd) 43 44 if (userName == ""){ 45 util.showDialog('error','用户名不能为空!'); 46 return; 47 } 48 if (userPwd == ""){ 49 util.showDialog('error','密码不能为空!'); 50 return; 51 } 52 53 $.get( pars.domain + "xxx" + "&t=" + (new Date).getTime(), function(ret) { 54 55 if (ret.code == 0) { 56 //如果登录成功,则把账号信息保存在cookie当中 57 if (rememberStatus){ 58 console.log("勾选了记住密码,现在开始写入cookie"); 59 util.setCookie('accountInfo',accountInfo,1440*3); 60 } 61 else{ 62 console.log("没有勾选记住密码,现在开始删除账号cookie"); 63 util.delCookie('accountInfo'); 64 } 65 66 // 若为本地环境 则手写cookie 67 if (window.location.href.indexOf('localhost') != -1){ 68 util.setCookie('token','zhaopeng_58e0cbbea951f0e79fafcee80da522b8',1440); 69 } 70 // console.log(window.location.href) 71 console.log('登录的返回值为0'); 72 router.push({path:'/'}); 73 } else { 74 util.showDialog('error','账号名或密码错误!'); 75 } 76 }, "json"); 77 78 }, 79 doRememberPassword: function(event){ 80 let mySelf = this; 81 let rememberStatus = mySelf.rememberPassword; 82 // event.preventDefault(); 83 mySelf.rememberPassword = !rememberStatus; 84 //如果去掉勾选,则删掉cookie 85 // if (!rememberStatus){ 86 87 // } 88 // mySelf.rememberPassword = false; 89 }, 90 loadAccountInfo: function(){ 91 92 let mySelf = this; 93 //zhaopeng&A15hOsu8YeGnCsjb 94 let accountInfo = util.getCookie('accountInfo'); 95 96 //如果cookie里没有账号信息 97 if(Boolean(accountInfo) == false){ 98 console.log('cookie中没有检测到账号信息!'); 99 return false; 100 } 101 else{ 102 //如果cookie里有账号信息 103 console.log('cookie中检测到账号信息!现在开始预填写!'); 104 let userName = ""; 105 let passWord = ""; 106 let index = accountInfo.indexOf("&"); 107 108 userName = accountInfo.substring(0,index); 109 passWord = accountInfo.substring(index+1); 110 111 mySelf.userName = userName; 112 mySelf.passWord = passWord; 113 mySelf.rememberPassword = true; 114 } 115 } 116 117 } 118 }
操作cookie逻辑js
1 // 设置cookie 2 setCookie: function(c_name,value,expiremMinutes){ 3 var exdate = new Date(); 4 exdate.setTime(exdate.getTime() + expiremMinutes * 60 * 1000); 5 document.cookie= c_name + "=" + escape(value)+((expiremMinutes==null) ? "" : ";expires="+exdate.toGMTString()); 6 }, 7 8 // 读取cookie 9 getCookie: function(c_name){ 10 if (document.cookie.length>0) 11 { 12 var c_start=document.cookie.indexOf(c_name + "="); 13 if (c_start!=-1) 14 { 15 c_start=c_start + c_name.length+1; 16 var c_end=document.cookie.indexOf(";",c_start); 17 if (c_end==-1) 18 c_end = document.cookie.length 19 return unescape(document.cookie.substring(c_start, c_end)) 20 } 21 } 22 return "" 23 }, 24 25 // 删除cookie 26 delCookie: function(c_name){ 27 var exp = new Date(); 28 exp.setTime(exp.getTime() - 1); 29 var cval = this.getCookie(c_name); 30 if(cval!=null){ 31 document.cookie = c_name + "=" + cval + ";expires=" + exp.toGMTString(); 32 } 33 },