vue实现七天免登录（cookie）

一、在登录页面的标签中加入一个checkbox v-model绑定它的checked

<div class="rt"><el-checkbox v-model="checked" style="color:#a0a0a0;">一周内自动登录</el-checkbox>
</div>

二、在data中定义checked：false
默认是不选中的
三、在methods中写出，设置、读取以及去除cookie的函数

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

四、在mounted中调用读取cookie
五、在登录成功后进行判断

      //判断复选框是否被勾选 勾选则调用配置cookie方法if (this.checked == true) {//传入账号名，密码，和保存天数3个参数this.setCookie(this.loginForm.username, this.loginForm.password, 7);}else {console.log("清空Cookie");//清空Cookiethis.clearCookie();}

vue实现七天免登录（cookie）相关推荐

SpringBoot Thymeleaf Vue Mybatis 登录和注册的实现，以及使用Cookie实现七天免登录
文章目录 5. 功能实现 5.1 用户注册和登录功能前端页面后台登录和注册 5.2 未登录拦截 5.3 七天内免登录 Cookie 和 Session Cookie简介 Cookie 的使用利用 ...
Cookie实现七天免登录
cookie实现七天免登录浏览器要实现自动登录,将登录信息保存本地的cookie里,但仅仅保存安全隐患高. 流程 1.保存用户信息,当选择七天自动登录复选框时,在后台验证用户密码正确后,将用户的这些 ...
七天免登录（Cookie+session）+ 页面显示动画人物效果（萌娘+气泡效果）+购物车的实现代码
一.七天免登录(Cookie+session),基于实现jsp页面页面效果:勾选7天免登录复选框,输入用户名和密码,点击登录即可,登录后可在cookie中查看用户登录信息,以及用户过期时间 1.登录 ...
PHP—利用cookie实现七天免登录
在大部分系统,都会存在用户的注册登录退出.当这个系统每天都要登录,但是每次都要输出用户名密码的话,就会觉得很麻烦(在不考虑安全隐患的情况下),这是就可以设计一个免登录的方法,来有效地解决这一问题. 解 ...
七天免登录JavaScript实现
html代码 <label for="">用户名:</label><input type="text" id="user ...
Cookie 学习案例之三天免登录
Cookie 问题:HTTP 协议是没有记忆功能的,一次请求结束后,相关数据会被销毁.如果第二次的请求需要使用相同的请求数据怎么办呢?难道是让用户再次请求书写吗? 解决:使用 Cookie 技术解释 ...
JavaWeb _ 07 session、Cookie和七天免登陆
提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档文章目录一.会话管理二.cookie 三.session 四.cookie与session的区别五.七天免登陆一.会话管理概 ...
关于在vue中实现7天免登录
在vue中实现7天免登录核心即利用vue的路由守卫beforeEach import Vue from 'vue' import App from './App.vue' import router ...
Javaweb | cookie实现两周内免登录
目录 1. 问题 2.解决思路 3. 解决步骤 3.1 编写登录页面(lg.jsp) 3.2 编写一个登录成功页面(success.jsp) 3.3 编写登录失败页面(fail.html) 3.4 写 ...

vue实现七天免登录（cookie）

vue实现七天免登录（cookie）相关推荐

最新文章

热门文章