vue 记住密码下次自动登录

<span><input type="checkBox" name="adviceCheck" id="adviceCheck" :checked="pasChecked" @click="changeChecked" hidden/><label for="adviceCheck" class="advice">下次自动登录</label>
</span>

import tokenUtils from '../../utils/cookieToken'pasChecked:false

mounted() {this.identifyCode = "";this.makeCode(this.identifyCodes, 4);tokenUtils.getCookie()
},

changeChecked() { this.pasChecked = !this.pasChecked;this.handleLogin();
},
handleLogin() {//保存的账号let name=this.loginForm.username;//保存的密码let pass=this.loginForm.password;//判断复选框是否被勾选 勾选则调用配置cookie方法if(this.pasChecked == true){//传入账号名，密码，和保存天数3个参数 tokenUtils.setCookie(name,pass,7);}else{ tokenUtils.clearCookie()}this.$refs.loginForm.validate(valid => {if (valid) {this.loading = true;this.$store.dispatch('login_store', this.loginForm).then(response => {var res=response.data;console.log(res);if (res.status === 200){console.log('用户名密码和验证码',this.loginForm);console.log('验证码图片中数字',this.identifyCode);this.loading = false;this.$router.push({ path: '/' })}else {Message({message: res.message,type: 'error',duration: 800})}this.loading = false}).catch(() => {this.loading = false})}});
},

utils/cookieToken文件

export default{//设置cookiesetCookie(c_name,c_pwd,exdays) {var exdate=new Date();//获取时间exdate.setTime(exdate.getTime() + 24*60*60*1000*exdays);//保存的天数//字符串拼接cookiewindow.document.cookie="userName"+ "=" +c_name+";path=/;expires="+exdate.toGMTString();window.document.cookie="userPwd"+"="+c_pwd+";path=/;expires="+exdate.toGMTString();},//读取cookiegetCookie:function () {if (document.cookie.length>0) {var arr=document.cookie.split('; ');//这里显示的格式需要切割一下自己可输出看下for(var i=0;i<arr.length;i++){var arr2=arr[i].split('=');//再次切割//判断查找相对应的值if(arr2[0]=='userName'){this.loginForm.username=arr2[1];//保存到保存数据的地方}else if(arr2[0]=='userPwd'){this.loginForm.password=arr2[1];}}}},//清除cookieclearCookie:function () {this.setCookie("","",-1);//修改2值都为空，天数为负1天就好了},
}

点击下次自动登录，再点击登录时，会保存用户名及密码（7天）

vue 记住密码下次自动登录相关推荐

php中实现记住密码下次自动登录的例子
做网站的时候经常会碰到要实现记住密码,下次自动登录,一周内免登陆,一个月内免登陆这种需求.这种功能一般都是通过cookie来实现的.本篇文章将简单说一下如何使用php实现该需求的.当然实现该需求的方法 ...
业务系统实现记住密码和自动登录功能
业务系统实现记住密码和自动登录功能公司的业务系统本来是受域控的,用户不需要登录可以直接访问系统.当然,虽然不用人工登录,系统本身会读取电脑的用户名为登录标识,对系统操作权限和记录也是以电脑名.近段时 ...
基于localStorge开发登录模块的记住密码与自动登录
前沿||我是乐于分享,善于交流的鸟窝先做写一篇关于登录模块中记住密码与自动登录的模块.鸟窝微信:jkxx123321 关于这个模块功能模块的由来,这是鸟大大的处女秀,为什么这么说呢?一天在群里,一个 ...
android 自动登录机制,Android登录记住密码以及自动登录的实现
记住密码以及自动登录的实现主要依赖于SharedPreferences类的使用,SharedPreferences是一个轻量级的存储类,用于存储一些小数据,比如登录账号密码以及状态信息等. 本文章只针 ...
EChat(简易聊天项目)六、实现记住密码和自动登录
利用SharedPreferences登录界面记住密码和自动登录 ①修改login_layout.xml文件,增加如下代码,即添加2个勾选框 <LinearLayoutandroid:orien ...
Android登录记住密码以及自动登录的实现
记住密码以及自动登录的实现主要依赖于SharedPreferences类的使用,SharedPreferences是一个轻量级的存储类,用于存储一些小数据,比如登录账号密码以及状态信息等. 本文章只针 ...
Winform 实现记住密码和自动登录
一般的软件都有记住密码和自动登录功能,所以今天说一种winform的记住方式. 效果: 关闭软件,再次打开时,密码已经填写好了,不需要输入. 点击登录也能校验成功,完美实现登录记住账号密码. 自动登录 ...
Cookie实现记住密码及自动登录
最近对华丹快速开发平台进行升级,需要对实现记住密码以及自动登录功能,下面主要说一下如何用cookie实现此功能. 一.什么是cookie? Cookie,有时也用其复数形式Cookies.是保存在客户 ...
Cookie实现记住密码、自动登录
前端代码 <form id="form" action="xxx" method="post"><div><i ...

vue 记住密码下次自动登录

vue 记住密码下次自动登录相关推荐

最新文章

热门文章