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 相关文章推荐
vue3+typeScript穿梭框的实现示例
Dec 29 Vue.js
梳理一下vue中的生命周期
Dec 30 Vue.js
解决vue使用vant轮播组件swipe + flex时文字抖动问题
Jan 07 Vue.js
vue 页面跳转的实现方式
Jan 12 Vue.js
vue 实现click同时传入事件对象和自定义参数
Jan 29 Vue.js
vue浏览器返回监听的具体步骤
Feb 03 Vue.js
Vue多选列表组件深入详解
Mar 02 Vue.js
vue3如何优雅的实现移动端登录注册模块
Mar 29 Vue.js
Vue实现动态查询规则生成组件
May 27 Vue.js
vue-cli4.5.x快速搭建项目
May 30 Vue.js
vue中利用mqtt服务端实现即时通讯的步骤记录
Jul 01 Vue.js
vue router 动态路由清除方式
May 25 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
我的论坛源代码(二)
2006/10/09 PHP
PHP字符串的连接的简单实例
2013/12/30 PHP
ThinkPHP单字母函数(快捷方法)使用总结
2014/07/23 PHP
ie focus bug 解决方法
2009/09/03 Javascript
Jquery实现弹出层分享微博插件具备动画效果
2013/04/03 Javascript
深入探密Javascript数组方法
2015/01/08 Javascript
jquery实现未经美化的简洁TAB菜单效果
2015/08/28 Javascript
使用JavaScript为Kindeditor自定义按钮增加Audio标签
2016/03/18 Javascript
JS中解决谷歌浏览器记住密码输入框颜色改变功能
2017/02/13 Javascript
js实现拖拽功能
2017/03/01 Javascript
bootstrap响应式工具使用详解
2017/11/29 Javascript
vue源码学习之Object.defineProperty 对数组监听
2018/05/30 Javascript
使用Three.js实现太阳系八大行星的自转公转示例代码
2019/04/09 Javascript
Vuex持久化插件(vuex-persistedstate)解决刷新数据消失的问题
2019/04/16 Javascript
vue $set 给数据赋值的实例
2019/11/09 Javascript
在JavaScript中实现链式调用的实现
2019/12/24 Javascript
Element InfiniteScroll无限滚动的具体使用方法
2020/07/27 Javascript
解决vue页面刷新,数据丢失的问题
2020/11/24 Vue.js
Python列表append和+的区别浅析
2015/02/02 Python
浅谈dataframe中更改列属性的方法
2018/07/10 Python
Django 路由系统URLconf的使用
2018/10/11 Python
Python3获取电脑IP、主机名、Mac地址的方法示例
2019/04/11 Python
Django框架模板的使用方法示例
2019/05/25 Python
Python Celery异步任务队列使用方法解析
2020/08/10 Python
H5 canvas中width、height和style的宽高区别详解
2018/11/02 HTML / CSS
美国综合购物商城:UnbeatableSale.com
2018/11/28 全球购物
DeinDesign德国:设计自己的手机壳
2019/12/14 全球购物
美国购物网站:Clickhere2shop
2021/01/28 全球购物
党校学习自我鉴定
2014/02/24 职场文书
大学生党员个人总结
2015/02/13 职场文书
乡镇科协工作总结2015
2015/05/19 职场文书
2015年幼儿园国庆节活动总结
2015/07/30 职场文书
教你利用Nginx 服务搭建子域环境提升二维地图加载性能的步骤
2021/09/25 Servers
JavaScript中document.activeELement焦点元素介绍
2021/11/27 Javascript
TV动画「神渣☆爱豆」公开第一弹主视觉图
2022/03/21 日漫
mysql5.5中文乱码问题解决的有用方法
2022/05/30 MySQL