前端vue+elementUI如何实现记住密码功能

我们这回使用纯前端保存密码

既然是记住密码,前端也就是使用cookie保存,访问时用cookie读取

先来了解下cookie的基本使用吧

Cookie

所有的cookie信息都在document.cookie中存放着,是一个字符串,里面的cookie以分号和空格分隔。就像这样:

	"key1=value1; key2=value2; key3=value3"
	// 使用document.cookie 来获取所有cookie
	docuemnt.cookie = "id="+value

操作cookie

	/**
 * 设置cookie值
 *
 * @param {String} name cookie名称
 * @param {String} value cookie值
 * @param {Number} expiredays 过期时间,天数
 */
 function setCookie (name, value, expiredays) {
 let exdate = new Date()
 		//setDate获取N天后的日期
 exdate.setDate(exdate.getDate() + expiredays) //getDate() 获取当前月份的日 + 过期天数
 document.cookie =name+"="+encodeURI(value)+";path=/;expires="+exdate.toLocaleString()
 }
 /**
 * 获取cookie值
 * @param {String} name cookie名称
 */
 function getCookie (name) {
  var arr = document.cookie.split(";") //转换数组
  //["_ga=GA1.1.1756734561.1561034020", " mobile=123" password=456"]
  for(var i=0;i<arr.length;i++){
   var arr2 = arr[i].split('='); // ["_ga", "GA1.1.1756734561.1561034020"]
   if(arr2[0].trim() == name){
    return arr2[1]
   }
  }
 }
 /**
 * 删除指定cookie值
 * @param {String} name cookie名称
 */
 function clearCookie (name) {
 setCookie(name, '', -1)
 }
 /**
 * 浏览器是否支持本地cookie
 */
 function isSupportLocalCookie () {
 let {name, value} = {name: 'name', value: 'mingze'}
 setCookie(name, value, 1) //设置cookie
 return getCookie(name).includes(value) //includes 判断数组name中是否含有当前value(返回true or false)
 }

好了了解了cookie我们开始如何实现一个简单的记住密码功能

HTML代码

 <el-form :model="ruleForm" :rules="rules"
 status-icon
 ref="ruleForm"
 label-position="left"
 label-width="0px"
 class="demo-ruleForm login-page">
 <h3 class="title">系统登录</h3>
<el-form-item prop="username">
  <el-input type="text"
   v-model="ruleForm2.username"
   auto-complete="off"
   placeholder="用户名"
  ></el-input>
 </el-form-item>
<el-form-item prop="password">
  <el-input type="password"
   v-model="ruleForm2.password"
   auto-complete="off"
   placeholder="密码"
  ></el-input>
 </el-form-item>
<el-checkbox v-model="checked" style="color:#a0a0a0;margin:0 0 20px 0">记住密码</el-checkbox>
<el-form-item style="width:100%;">
 <el-button type="primary" style="width:100%;" @click="handleSubmit" :loading="logining">登录	</el-button>
</el-form-item>
</el-form>

vue代码

 data(){
  return {
  	 logining: false,
   checked: true
   ruleForm: {
    username: '',
    password: '',
   },
   rules: {
    username: [{required: true, message: '请输入您的帐户', trigger: 'blur'}],
    password: [{required: true, message: '请输入您的密码', trigger: 'blur'}]
   },
  }
 },
 mounted() {
  this.account() //获取cookie的方法
 },
 account(){
  if(document.cookie.length <= 0){
   console.log(this.getCookie('mobile'))
   this.ruleForm.username = this.getCookie('mobile')
   this.ruleForm.password = this.getCookie('password')
  }
 },
 setCookie(c_name,c_pwd,exdate){ //账号,密码 ,过期的天数
  var exdate = new Date()
  console.log(c_name,c_pwd)
  exdate.setTime(exdate.getTime() + 24 * 60 * 60 * 1000 * exdate) //保存的天数
  document.cookie ="mobile="+c_name+";path=/;expires="+exdate.toLocaleString()
  document.cookie ="password="+c_pwd+";path=/;expires="+exdate.toLocaleString()
 },
 getCookie(name){
  var arr = document.cookie.split(";")
   //["_ga=GA1.1.1756734561.1561034020", " mobile=123" password=456"]
   for(var i=0;i<arr.length;i++){
    var arr2 = arr[i].split('='); // ["_ga", "GA1.1.1756734561.1561034020"]
    if(arr2[0].trim() == name){
     return arr2[1]
    }
   }
  },
  clearCookie(){
   this.setCookie("","",-1) //清除cookie
  },
	handleSubmit(){ //提交登录
	 this.$refs.ruleForm.validate((valid) => {
   if(valid){
   	this.logining = true;
   	var _this = this;
   	if(_this.checked == true){
   	 	//存入cookie
    _this.setCookie(_this.ruleForm.username,_this.ruleForm.password,7) //保存7天
   }else{
    _this.clearCookie();
   }
   Login({
    mobile:_this.ruleForm.username,
    password:_this.ruleForm.password
   }).then((result) => {
    console.log(result)
    _this.$alert('登陆成功')
   })
  }
	}

好了,这回的记住密码就到这里,小伙伴们一起努力吧 ^ 0 ^

总结

到此这篇关于前端vue+elementUI如何实现记住密码功能的文章就介绍到这了,更多相关vue+elementUI记住密码内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

(0)

相关推荐

  • vue+elementUi 实现密码显示/隐藏+小图标变化功能

    vue+elementUi 实现密码显示/隐藏+小图标变化(js一共三行代码,其中一行为了美观)...,先给大家展示下效果图,感觉不错可以参考实现代码. [效果图] [html] // 前后代码[略] <el-form-item label="密码" prop="pwd"> <el-input v-model="ruleForm.pwd" :type="pwdType" placeholder="请

  • Vue+element 解决浏览器自动填充记住的账号密码问题

    我们在做form表单的时候,会发现,浏览器会自动的将我们之前保存的密码,自动的填充到表单中input 为 type="password" 的框中 登录页面也就算了,但是注册页面就很难受了,有一种不受控制的感觉 不行,我的代码必须由我控制,下面是解决方案: 解决方法:只需要在每个input框前面加一个input,同时将其隐藏,就ok了,账号那个需要放在下面,原因不详... 总结 以上所述是小编给大家介绍的Vue+element 解决浏览器自动填充记住的账号密码问题,希望对大家有所帮助,如

  • vue+element-ui集成随机验证码+用户名+密码的form表单验证功能

    在登入页面,我们往往需要通过输入验证码才能进行登入,那我们下面就详讲一下在vue项目中如何配合element-ui实现这个功能 第一步:自定义一个生产随机验证码的组件,其本质是使用canvas绘制,详细代码如下: <template> <div class="s-canvas"> <canvas id="s-canvas" :width="contentWidth" :height="contentHeig

  • vue.js+ElementUI实现进度条提示密码强度效果

    要求一:判断输入的字符串是否包含数字.小写字母.大写字母以及特殊字符四种内容的8-20位字符 通过搜索了解到可以使用?=这个正则语法判断字符串中是否含有多种内容.(?=)这个语法结构在正则里表示"设定后面是"的意思,举下面几个例子进一步了解?=这个语法: (?=.*[a-zA-Z])  这句的意思就是后面必须有一位大写或小写字母 (?=.*[1-9]) 这句的意思是后面必须有一位数字 (?=.*[\W]) 这句的意思是后面必须有一个非字母数字及下划线的特殊符号 (?!.*[\u4E00

  • 前端vue+elementUI如何实现记住密码功能

    我们这回使用纯前端保存密码 既然是记住密码,前端也就是使用cookie保存,访问时用cookie读取 先来了解下cookie的基本使用吧 Cookie 所有的cookie信息都在document.cookie中存放着,是一个字符串,里面的cookie以分号和空格分隔.就像这样: "key1=value1; key2=value2; key3=value3" // 使用document.cookie 来获取所有cookie docuemnt.cookie = "id="

  • vue中使用sessionStorage记住密码功能

    sessionStorage和localStorage比较 二者区别 sessionStorage用于本地存储一个会话(session)中的数据,这些数据只有在同一个会话中的页面才能访问并且当会话结束后数据也随之销毁.因此sessionStorage不是一种持久化的本地存储,仅仅是会话级别的存储. localStorage用于持久化的本地存储,除非主动删除数据,否则数据是永远不会过期的. localStorage和sessionStorage操作 localStorage和sessionStor

  • vue实现禁止浏览器记住密码功能的示例代码

    查找资料 网上查到的一些方法: 使用 autocomplete="off"(现代浏览器许多都不支持) 使用 autocomplete="new-password" 在真正的账号密码框之前增加相同 name 的 input 框 使用 readonly 属性,在聚焦时移除该属性 初始化 input 框的 type 属性为 text,聚焦时修改为 password 使用 type="text",手动替换文本框内容为星号 "*" 或者

  • Vue+element+cookie记住密码功能的简单实现方法

    实现功能: 1.登录时勾选记住密码,用cookie保存账号和密码并对密码进行两次加密处理(纯前端),下次登录自动输入账号密码 2.登录时不勾选,清空cookie,下次登录需要输入 效果图: ===========================================================================================================================================================

  • JAVA记住密码功能的实现代码

    准备:SSM框架,mysql数据库 用户表 user 实体类: public class User { /** * 主键id */ private Integer userId; /** * 账号 */ private String username; /** * 密码 */ private String password; public Integer getUserId() { return userId; } public void setUserId(Integer userId) {

  • AngularJS前端页面操作之用户修改密码功能示例

    本文实例讲述了AngularJS前端页面操作之用户修改密码功能.分享给大家供大家参考,具体如下: 最近在做前端设计,主要使用的知识有AngularJS和nodejs来进行页面显示和数据请求.处理等工作.在设计页面比如忘记密码时,发现一个有效的设计思路是很重要的. 就以修改密码为例,要将提示信息友好的展示给用户,明确告诉用户在操作的过程中那部分有问题,这需要定义详细的变量以及能在页面的不同位置显示信息.下面的代码是自己写的一个简单例子,记录学习进程. changePwd var app = ang

  • js中利用cookie实现记住密码功能

    在登录界面添加记住密码功能,我首先想到的是在java后台中调用cookie存放账号密码,大致如下: HttpServletRequest request HttpServletResponse response Cookie username = new Cookie("username ","cookievalue"); Cookie password = new Cookie("password ","cookievalue&quo

  • JavaScript中如何使用cookie实现记住密码功能及cookie相关函数介绍

    cookie是网站设计者放置在客户端(浏览器)的小文本文件,cookie不仅能够实现保存密码功能,还可以通过cookie保存最近浏览记录增加用户体验. 在登录界面添加记住密码功能,我首先想到的是在java后台中调用cookie存放账号密码,大致如下: HttpServletRequest request HttpServletResponse response Cookie username = new Cookie("username ","cookievalue"

  • js cookie实现记住密码功能

    本文为大家分享了js和jQuery记住密码功能的方法,具体如下 一. js 实现记住密码功能 html: <form id="form22" name="form22" action="checklogin.action" method="post" > <div class="username" style="margin-top:50px;"> <lab

  • Android通过"记住密码"功能学习数据存储类SharedPreferences详解及实例

    SharedPreferences是Android中存储简单数据的一个工具类.可以想象它是一个小小的Cookie,它通过用键值对的方式把简单数据类型(boolean.int.float.long和String)存储在应用程序的私有目录下(data/data/包名/shared_prefs/)自己定义的xml文件中. 一.简介 它提供一种轻量级的数据存储方式,通过eidt()方法来修改里面的内容,通过Commit()方法来提交修改后的内容. 二.重要方法 public abstract boole

随机推荐