个人中心
gpt4 book ai didi

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

转载 作者：qq735679552 更新时间：2022-09-29 22:32:09 26 4
gpt4 key购买 nike

CFSDN坚持开源创造价值，我们致力于搭建一个资源共享平台，让每一个IT人在这里找到属于你的精彩世界.

这篇CFSDN的博客文章前端vue+elementUI如何实现记住密码功能由作者收集整理，如果你对这篇文章有兴趣，记得点赞哟.

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

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

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

Cookie 。

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

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

操作cookie 。

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
    /**
* 设置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代码 。

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
< 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代码 。

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
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记住密码内容请搜索我以前的文章或继续浏览下面的相关文章希望大家以后多多支持我！ 。

原文链接：https://blog.csdn.net/mingze6576/article/details/103815996 。

最后此篇关于前端vue+elementUI如何实现记住密码功能的文章就讲到这里了,如果你想了解更多关于前端vue+elementUI如何实现记住密码功能的内容请搜索CFSDN的文章或继续浏览相关文章，希望大家以后支持我的博客！ 。

26 4 0
文章推荐： linux rsync的安装与配置
文章推荐： LNMP添加、删除虚拟主机及伪静态使用教程
文章推荐： Vue+element+cookie记住密码功能的简单实现方法
文章推荐： 解决vue项目运行提示Warnings while compiling.警告的问题
qq735679552
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com