vue项目实现记住密码到cookie功能示例(附源码)

本文介绍了vue项目实现记住密码到cookie功能示例,分享给大家,具体如下:

登陆页面

实现功能:

1.记住密码勾选,点登陆时,将账号和密码保存到cookie,下次登陆自动显示到表单内
2.不勾选,点登陆时候则清空之前保存到cookie的值,下次登陆需要手动输入

大体思路就是通过存/取/删cookie实现的;每次进入登录页,先去读取cookie,如果浏览器的cookie中有账号信息,就自动填充到登录框中,存cookie是在登录成功之后,判断当前用户是否勾选了记住密码,如果勾选了,则把账号信息存到cookie当中,效果图如上:

直接上主要的代码

HTML部分

<div class="ms-login">
    <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="0px" class="demo-ruleForm">
      <el-form-item prop="username">
        <el-input v-model="ruleForm.username" placeholder="用户名"></el-input>
      </el-form-item>
      <el-form-item prop="password">
        <el-input type="password" placeholder="密码" v-model="ruleForm.password" @keyup.enter.native="submitForm('ruleForm')"></el-input>
      </el-form-item>
      <!-- `checked` 为 true 或 false -->
      <el-checkbox v-model="checked">记住密码</el-checkbox>
      <br>
      <br>
      <div class="login-btn">
        <el-button type="primary" @click="submitForm('ruleForm')">登录</el-button>
      </div>
    </el-form>
  </div>

JS部分

  //页面加载调用获取cookie值
  mounted() {
    this.getCookie();
  },
  methods: {
    submitForm(formName) {
             const self = this;
            //判断复选框是否被勾选 勾选则调用配置cookie方法
            if (self.checked == true) {
              console.log("checked == true");
              //传入账号名,密码,和保存天数3个参数
              self.setCookie(self.ruleForm.username, self.ruleForm.password, 7);
            }else {
             console.log("清空Cookie");
             //清空Cookie
             self.clearCookie();
            }

            //与后端请求代码,本功能不需要与后台交互所以省略

            console.log("登陆成功");

        });
      },
      //设置cookie
      setCookie(c_name, c_pwd, exdays) {
        var exdate = new Date(); //获取时间
        exdate.setTime(exdate.getTime() + 24 * 60 * 60 * 1000 * exdays); //保存的天数
        //字符串拼接cookie
        window.document.cookie = "userName" + "=" + c_name + ";path=/;expires=" + exdate.toGMTString();
        window.document.cookie = "userPwd" + "=" + c_pwd + ";path=/;expires=" + exdate.toGMTString();
      },
      //读取cookie
      getCookie: 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.ruleForm.username = arr2[1]; //保存到保存数据的地方
            } else if (arr2[0] == 'userPwd') {
              this.ruleForm.password = arr2[1];
            }
          }
        }
      },
      //清除cookie
      clearCookie: function() {
        this.setCookie("", "", -1); //修改2值都为空,天数为负1天就好了
      }

浏览器中的cookie信息如下图,注意这里的cookie的expire/Max-Age过期时间,这个时间是格林尼治标准时间GMT,世界统一的时间,GMT+8小时就是北京时间。(这里不做加密功能)

源码链接 vue项目实现表单登录页保存账号和密码到cookie功能

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

您可能感兴趣的文章:

  • 浅谈Vue SSR 的 Cookies 问题
  • VUE前端cookie简单操作
  • 在Vue中如何使用Cookie操作实例
  • 详解Vue用axios发送post请求自动set cookie
(0)

相关推荐

  • VUE前端cookie简单操作

    如下是简单cookie操作,当前仅限前端实例,具体内容如下 要注意的有两点: 1.cookie内容存贮的名称 2.删除cookie是通过设置过期为过去时间实现的 <body> <div id="app"> <button @click="clearCookie()"> 清除cookie </button> </div> </body> <script> let app = new V

  • 在Vue中如何使用Cookie操作实例

    大家好,由于公司忙着赶项目,导致有段时间没有发布新文章了.今天我想跟大家谈谈Cookie的使用.同样,这个Cookie的使用方法是我从公司的项目中抽出来的,为了能让大家看懂,我会尽量写详细点.废话少说,我们直接进入正题. 一.安装Cookie 在Vue2.0下,这个貌似已经不需要安装了.因为当你创建一个项目的时候,npm install 已经为我们安装好了.我的安装方式如下: # 全局安装 vue-cli $ npm install --global vue-cli # 创建一个基于 webpa

  • 浅谈Vue SSR 的 Cookies 问题

    一个网站一旦涉及到多用户, 就很难从 Cookies 中逃脱, Vue SSR 的 cookies 也真算是遇到的一个不小的问题, 从开始玩 SSR 开始到现在, 一共想出了3种方案, 从最早的把 Cookies 注入到 state 中, 到把 Cookies 注入到 global, 到现在的将 Cookies 注入到组件的 asyncData 方法. 随着 Vue 的升级, 第一种方案已经不再适用, 第二种也有不少的限制, 于是想到第三种方案, 下来就说说具体实现的方法: 第一种方案 第一种方

  • 详解Vue用axios发送post请求自动set cookie

    vue-resource不再维护之后,我也用起了axios,但是死活无法设置服务器发送过来的cookie 后来查询文档发现,这个是要单独配置的. // `withCredentials` indicates whether or not cross-site Access-Control requests // should be made using credentials withCredentials: false, // default 当我们把此配置项设置成默认配置项并且设置成true

  • vue项目实现记住密码到cookie功能示例(附源码)

    本文介绍了vue项目实现记住密码到cookie功能示例,分享给大家,具体如下: 登陆页面 实现功能: 1.记住密码勾选,点登陆时,将账号和密码保存到cookie,下次登陆自动显示到表单内 2.不勾选,点登陆时候则清空之前保存到cookie的值,下次登陆需要手动输入 大体思路就是通过存/取/删cookie实现的:每次进入登录页,先去读取cookie,如果浏览器的cookie中有账号信息,就自动填充到登录框中,存cookie是在登录成功之后,判断当前用户是否勾选了记住密码,如果勾选了,则把账号信息存

  • PHP发表心情投票功能示例(附源码)

    当浏览新闻页面或者其它页面的时候会有阅读后的感受,比如给力.淡定.打酱油.加油.坑爹等等的表情.让读者打分,看看自己的感受是否与其他读者一样.很不错的交互! 立即下载:mood_jb51.rar 本文需要熟悉jquery,mysql,ajax相关的知识,不过用的不多.本文有三个文件:index.html,mood.php,sql.php index.html,页面展示和请求ajax数据 mood.php,后台文件 处理get请求来的数据,并返回数据 sql.php,数据库文件,存数据库信息 直接

  • 基于Redis实现短信验证码登录项目示例(附源码)

    目录 Redis短信登录流程描述 短信验证码的发送 短信验证码的验证 是否登录的验证 源码分析 模拟发送短信验证码 短信验证码的验证 校验是否登录 登录验证优化 Redis短信登录流程描述 短信验证码的发送 用户提交手机号,系统验证手机号是否有效,毕竟无效手机号会消耗你的短信验证次数还会导致系统的性能下降.如果手机号为无效的话就让用户重新提交手机号,如果有效就生成验证码并将该验证码作为value保存到redis中对应的key是手机号,之所以这么做的原因是保证key的唯一性,如果使用固定字符串作为

  • 微信小程序之多列表的显示和隐藏功能【附源码】

    今天在项目碰到一个问题,之前在项目首页实现单列表的显示和隐藏,通过wx:if判断就可实现,现在要实现多列表的单项显示和隐藏功能应该如何实现呢?如果还用wx:if实现的话会出现点击一个列表项,多个列表同时显示和隐藏,明显不适合功能需求,然后简单地查了资料也没发现有类似的功能,最后思考一番后,慢慢地理清了思路... 效果图: 实现思路: 实现单个列表的显示和隐藏应该使用唯一元素让程序知道你应该显示和隐藏哪个列表项,可以用数据的id: css中定义一个hidden{display:none}控制显示和

  • vue项目中实现的微信分享功能示例

    本文实例讲述了vue项目中实现的微信分享功能.分享给大家供大家参考,具体如下: /* 微信分享 */ Vue.prototype.wechatShare = (shareData) => { let resource = { title: '随我心愿!', desc: '体验优质服务', link: 'https://www.abc.cn/', img: 'https://www.abc.cn/images/share_logo.jpg' } let obj = Object.assign({}

  • android-使用环信SDK开发即时通信功能(附源码下载)

    最近项目中集成即时聊天功能,挑来拣去,最终选择环信SDK来进行开发,选择环信的主要原因是接口方便.简洁,说明文档清晰易懂.文档有Android.iOS.和后台服务器端,还是非常全的. 环信官网:http://www.easemob.com/ 本篇文章目的主要在于说明环信Demo如何实现即时通信的.我在集成环信SDK到我们自己开发的app之前,研究了一下环信demo的代码,看了两三天的样子,基本搞清楚来龙去脉,但是只是清楚来龙去脉,要说到里面的细节可能得深一步研究,但是这就够了,已经可以把demo

  • Android开发实现仿QQ消息SwipeMenuListView滑动删除置顶功能【附源码下载】

    本文实例讲述了Android开发实现仿QQ消息SwipeMenuListView滑动删除置顶功能.分享给大家供大家参考,具体如下: 一.先来效果图 二.实现步骤: 1. 在项目build.gradle里面添加包 compile 'com.baoyz.swipemenulistview:library:1.3.0' 2. xml布局文件 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

  • Android实现画板、写字板功能(附源码下载)

    前言 本文给大家分享一个使用Android开发写字板功能Dem.简单操作内存中的图像.对图像进行简单的处理.绘制直线.以达到写字板的效果 效果图如下 XML布局代码 <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="

  • Android开发实现可拖动排序的ListView功能【附源码下载】

    本文实例讲述了Android开发实现可拖动排序的ListView功能.分享给大家供大家参考,具体如下: 一.上图 二.简述 1.需要实现的效果是长按右侧可拖动部分布局实现列表项的拖动排序 2.当点击列表项前面的单选按钮时,在该条目右侧显示删除图标,点击该图标删除当前条目. 三.实现思路 借助github上的开源代码drag-sort-listview-master加以改造. 四.主要源码展示 1.Activity代码 package com.gengducun.dslvdemo; import

  • Android编程实现滑动开关组件功能【附源码下载】

    本文实例讲述了Android编程实现滑动开关组件功能.分享给大家供大家参考,具体如下: 由于Android并未提供滑动开关之类的组件,所以我们需要自己去实现一个自定义的视图组件来实现滑动开关效果. 这里有一个示例代码,它包括三个类:开关组件视图.状态监听接口.MainActivity 我们先来看看整个demo的效果图: 我们先来看看视图组件的完整代码,代码都已经注释: package com.bear.swtichbuttondemo; import java.util.ArrayList; i

随机推荐