vue登录页实现使用cookie记住7天密码功能的方法


Posted in Vue.js onFebruary 18, 2021

问题描述

项目的登录页中,会有要求记住7天密码的功能,本篇文章记录一下写法,主要是使用cookie,注释我写的很详细了,大家可以看一下我写的注释的步骤,还是比较详细的。亲测有效

html部分

代码图示

vue登录页实现使用cookie记住7天密码功能的方法

效果图示

vue登录页实现使用cookie记住7天密码功能的方法

代码粘贴

<el-form
       ref="form"
       :model="form"
       label-width="80px"
       label-position="top"
       @submit.native.prevent
      >
       <el-form-item label="用户名/账号">
        <div class="userError">
         <el-input
          size="mini"
          v-model.trim="form.userName"
          clearable
         ></el-input>
        </div>
       </el-form-item>
       <el-form-item label="密码">
        <div class="pwdError">
         <el-input
          size="mini"
          v-model.trim="form.loginPwd"
          clearable
          show-password
         ></el-input>
        </div>
       </el-form-item>
       <el-checkbox label="记住账号" v-model="isRemember"></el-checkbox>
       <el-button native-type="submit" size="mini" @click="loginPage"
        >登录</el-button
       >
      </el-form>

js部分

export default {
 name: "login",
 data() {
  return {
   form: {
    userName: '',
    loginPwd: '',
   },
   isRemember: false,
  };
 },
 mounted() {
  // 第1步,在页面加载的时候,首先去查看一下cookie中有没有用户名和密码可以用
  this.getCookie();
 },
 methods: {
  /* 第3步,当用户执行登录操作的时候,先看看用户名密码对不对
       若不对,就提示登录错误
       若对,就再看一下用户有没有勾选记住密码
          若没勾选,就及时清空cookie,回到最初始状态
          若勾选了,就把用户名和密码存到cookie中并设置7天有效期,以供使用
           (当然也有可能是更新之前的cookie时间)
  */
  async loginPage() {
   // 发请求看看用户输入的用户名和密码是否正确
   const res = await this.$api.loginByUserName(this.form)
   if(res.isSuccess == false){
    this.$message.error("登录错误")
   }
   else{
    const self = this;
    // 第4步,若复选框被勾选了,就调用设置cookie方法,把当前的用户名和密码和过期时间存到cookie中
    if (self.isRemember === true) {
     // 传入账号名,密码,和保存天数(过期时间)3个参数
     // 1/24/60 测试可用一分钟测试,这样看着会比较明显
     self.setCookie(this.form.userName, this.form.loginPwd, 1/24/60);
     // self.setCookie(this.form.userName, this.form.loginPwd, 7); // 这样就是7天过期时间
    } 
    // 若没被勾选就及时清空Cookie,因为这个cookie有可能是上一次的未过期的cookie,所以要及时清除掉
    else {
     self.clearCookie();
    }
    // 当然,无论用户是否勾选了cookie,路由该跳转还是要跳转的
    this.$router.push({
     name: "project",
    });
   }
  },
  // 设置cookie
  setCookie(username, password, exdays) {
   var exdate = new Date(); // 获取当前登录的时间
   exdate.setTime(exdate.getTime() + 24 * 60 * 60 * 1000 * exdays); // 将当前登录的时间加上七天,就是cookie过期的时间,也就是保存的天数
   // 字符串拼接cookie,因为cookie存储的形式是name=value的形式
   window.document.cookie = "userName" + "=" + username + ";path=/;expires=" + exdate.toGMTString();
   window.document.cookie = "userPwd" + "=" + password + ";path=/;expires=" + exdate.toGMTString();
   window.document.cookie = "isRemember" + "=" + this.isRemember + ";path=/;expires=" + exdate.toGMTString();
  },
  // 第2步,若cookie中有用户名和密码的话,就通过两次切割取出来存到form表单中以供使用,若是没有就没有
  getCookie: function () {
   if (document.cookie.length > 0) {
    var arr = document.cookie.split("; "); //因为是数组所以要切割。打印看一下就知道了
    // console.log(arr,"切割");
    for (var i = 0; i < arr.length; i++) {
     var arr2 = arr[i].split("="); // 再次切割
     // console.log(arr2,"切割2");
     // // 判断查找相对应的值
     if (arr2[0] === "userName") {
      this.form.userName = arr2[1]; // 转存一份保存用户名和密码
     } else if (arr2[0] === "userPwd") {
      this.form.loginPwd = arr2[1];//可解密
     } else if (arr2[0] === "isRemember") {
      this.isRemember = Boolean(arr2[1]);
     }
    }
   }
  },
  // 清除cookie
  clearCookie: fu![image](/img/bVcOHhz)
   this.setCookie("", "", -1); // 清空并设置天数为负1天
  },
 },
};

cookie存储图示

vue登录页实现使用cookie记住7天密码功能的方法

总结

其实也很简单,就是设置一个过期时间,也就是cookie的失效的日期,当然中间需要有一些格式的处理,数据的加工。

补充,cookie是存在浏览器中,浏览器安装在电脑中,比如安装在C盘,所以cookie是存在C盘中的某个文件夹下,那个文件夹不仅有cookie,还有localStorage和sessionStorage和别的,具体哪个文件夹大家可以自己动手找一找。其实所谓的本地存储其实就是存在自己的电脑上。

到此这篇关于vue登录页实现使用cookie记住7天密码功能的方法的文章就介绍到这了,更多相关vue登录页cookie记住密码内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Vue.js 相关文章推荐
vue打开其他项目页面并传入数据详解
Nov 25 Vue.js
Vue用mixin合并重复代码的实现
Nov 27 Vue.js
Vue中ref和$refs的介绍以及使用方法示例
Jan 11 Vue.js
基于VUE实现简单的学生信息管理系统
Jan 13 Vue.js
vue监听键盘事件的相关总结
Jan 29 Vue.js
vue使用lodop打印控件实现浏览器兼容打印的方法
Feb 07 Vue.js
vue组件的路由高亮问题解决方法
May 11 Vue.js
springboot+VUE实现登录注册
May 27 Vue.js
Vue中foreach数组与js中遍历数组的写法说明
Jun 05 Vue.js
Vue过滤器(filter)实现及应用场景详解
Jun 15 Vue.js
一定要知道的 25 个 Vue 技巧
Nov 02 Vue.js
解决vue中provide inject的响应式监听
Apr 19 Vue.js
Vue包大小优化的实现(从1.72M到94K)
Feb 18 #Vue.js
Vue如何实现变量表达式选择器
Feb 18 #Vue.js
WebStorm无法正确识别Vue3组合式API的解决方案
Feb 18 #Vue.js
如何在 Vue 中使用 JSX
Feb 14 #Vue.js
Vue单页面应用中实现Markdown渲染
Feb 14 #Vue.js
vue仿携程轮播图效果(滑动轮播,下方高度自适应)
Feb 11 #Vue.js
Vue+Bootstrap实现简易学生管理系统
Feb 09 #Vue.js
You might like
php 连接mssql数据库 初学php笔记
2010/03/01 PHP
检测png图片是否完整的php代码
2010/09/06 PHP
解决PHP mysql_query执行超时(Fatal error: Maximum execution time …)
2013/07/03 PHP
ThinkPHP5.0 图片上传生成缩略图实例代码说明
2018/06/20 PHP
javascript 硬盘序列号+其它硬件信息
2008/12/23 Javascript
jquery 弹出层注册页面等(asp.net后台)
2010/06/17 Javascript
Jquery 类网页微信二维码图块滚动效果具体实现
2013/10/14 Javascript
jquery检测input checked 控件是否被选中的方法
2014/03/26 Javascript
JS基于myFocus库实现各种功能的tab选项卡切换效果
2015/09/19 Javascript
浅谈js对象属性 通过点(.) 和方括号([]) 的不同之处
2016/10/29 Javascript
JS DOMReady事件的六种实现方法总结
2016/11/23 Javascript
深入理解ES6的迭代器与生成器
2017/08/19 Javascript
VUE页面中加载外部HTML的示例代码
2017/09/20 Javascript
jQuery+CSS实现的table表格行列转置功能示例
2018/01/08 jQuery
使用vue-router beforEach实现判断用户登录跳转路由筛选功能
2018/06/25 Javascript
浅谈Angular6的服务和依赖注入
2018/06/27 Javascript
实例介绍JavaScript中多种组合继承
2019/01/20 Javascript
在layui中layer弹出层点击事件无效的解决方法
2019/09/05 Javascript
vue+flask实现视频合成功能(拖拽上传)
2021/03/04 Vue.js
[01:10:58]Spirit vs NB Supermajor小组赛 A组败者组决赛 BO3 第二场 6.2
2018/06/03 DOTA
[03:02]2020完美世界城市挑战赛(秋季赛)总决赛回顾
2021/03/11 DOTA
Python黑魔法Descriptor描述符的实例解析
2016/06/02 Python
利用python发送和接收邮件
2016/09/27 Python
Python中字符串的修改及传参详解
2016/11/30 Python
Python向Excel中插入图片的简单实现方法
2018/04/24 Python
Python基础学习之基本数据结构详解【数字、字符串、列表、元组、集合、字典】
2019/06/18 Python
python 利用浏览器 Cookie 模拟登录的用户访问知乎的方法
2019/07/11 Python
文件中有一组整数,要求排序后输出到另一个文件中
2012/01/04 面试题
幼师自荐信范文
2013/10/06 职场文书
自我评价范文点评
2013/12/04 职场文书
六一儿童节演讲稿
2014/05/23 职场文书
学校读书活动总结
2014/06/30 职场文书
创新社会管理心得体会
2014/09/12 职场文书
python实现大文本文件分割成多个小文件
2021/04/20 Python
详解分布式系统中如何用python实现Paxos
2021/05/18 Python
MySQL CHAR和VARCHAR该如何选择
2021/05/31 MySQL