效果

思路：

采用cookie保存账户和密码。

如果勾选了记住密码，将用户名和密码保存在cookie中，设置cookie中数据保存的时间，过期清除cookie保存的值，

每次新登录的时候，获取本地保存的cookie值。

代码解析：

<el-input>标签加show-password可以控制密码的显示和隐藏

<el-checkbox v-model="checked" class="remeberPwd">记住密码</el-checkbox>
通过checked字段控制记住密码是否被选中，初始设为false。

          <el-card shadow="never"><el-formref="loginForm"label-position="top":rules="rules":model="formLogin"size="default"><el-form-item prop="username"><el-input type="text" v-model="formLogin.username" placeholder="用户名" clearable><i slot="prepend" class="fa fa-user-circle-o"></i></el-input></el-form-item><el-form-item prop="password"><el-input@keyup.enter.native="handleBindPhone"type="password"v-model="formLogin.password"placeholder="密码"show-passwordclearable><i slot="prepend" class="fa fa-keyboard-o"></i></el-input></el-form-item><el-checkbox v-model="checked" class="remeberPwd">记住密码</el-checkbox><el-buttonsize="default"@click="handleBindPhone"type="primary":loading="logining"class="button-login">登录</el-button></el-form></el-card>

data：

  data() {return {timeInterval: null,logining: false,// 表单校验rules: {username: [{required: true,message: "请输入用户名",trigger: "blur"}],password: [{required: true,message: "请输入密码",trigger: "blur"}]},// 表单formLogin: {username: "",password: "",},// 记住密码checkedchecked: false};},

methods

mounted() {this.account(); //获取cookie的方法},account() {// if (document.cookie.length <= 0) {console.log(this.getCookie("username"));this.formLogin.username = this.getCookie("username");this.formLogin.password = this.getCookie("password");// }},setCookie(c_name, c_pwd, exdate) {//账号，密码 ，过期的天数var exdate = new Date();exdate.setTime(exdate.getTime() + 24 * 60 * 60 * 1000 * exdate); //保存的天数document.cookie ="username=" + 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},// 提交登录信息handleBindPhone() {this.$refs.loginForm.validate(valid => {if (valid) {this.logining = true;var _this = this;if (_this.checked == true) {//存入cookie_this.setCookie(_this.formLogin.username,_this.formLogin.password,7); //保存7天} else {_this.clearCookie();}// 登录// 注意 这里的演示没有传验证码// 具体需要传递的数据请自行修改代码this.login({username: this.formLogin.username,password: this.formLogin.password}).then(() => {Ajax({// 获取用户信息methods: "get",url: "/account/info"},res => {// console.log('用户信息', res)util.cookies.set("uuid", res.data.id);this.$store.dispatch("d2admin/user/set",{name: res.data.username},{ root: true });});}).then(() => {Ajax({// 获取侧边栏后再进入methods: "get",url: "/rule/menu"},res => {this.$store.commit("d2admin/menu/asideSet",this.changeData(res.data));this.$router.replace(this.$route.query.redirect || "/");});});} else {// 登录表单校验失败this.$message.error("表单校验失败，请检查");}});}

vue+elementUl实现登录记住密码功能相关推荐

vue 登录页面记住密码功能
vue+iview/element 一般用来快速搭建后台管理系统,登录页的记住密码功能也是必不可少的. 记住密码快速登录功能(iview ui): 思路:首次登录,记住密码,将密码存储到cookie中 ...
vue考试系统后台管理项目-登录、记住密码功能
考试系统后台管理项目介绍: 技术选型:Vue2.0+Elemenu-ui 项目功能介绍: 账户信息模块:菜单权限.角色权限设置.角色权限分配.账号设置.公司分组考试管理模块:新增/编辑/删除考试试题 ...
php js记住密码功能,jquery.cookie.js实现用户登录保存密码功能的方法_jquery
本文实例讲述了jquery.cookie.js实现用户登录保存密码功能的方法.分享给大家供大家参考,具体如下: 需要导入的js有jquery.js和jquery.cookie.js 在页面加载时首先尝 ...
PHP会员登录实现记住密码功能 thinkPHP5
会员登录实现记住密码功能需要用到cookie 和session,首先我们来简单了解一下cookie 和session 的区别 Cookie Cookie是完全保存在客户端.当客户端禁止cookie时将 ...
PyQt5实现登录界面，包含用户注册，记住密码功能
本文主要基于PyQt5用的是qt designer,连接MySQL实现登录界面,包含注册功能,记住密码功能,说明这一切都是基于在pycharm上配置好了pyuic和qt designer 目录 1.实 ...
android 登录保存密码,android 如何实现登陆界面的记住密码功能
今天写了一个有关登录记住密码的列子其实这个例子的关键使用到了AutoCompleteTextView 以及sharedPreference的两个关键知识点,大家知道 AutoCompleteTex ...
AppCan用cookie实现记住密码功能 [APP]
今天想做个在应用上记住密码的功能.想了一下,先用COOKIE来测试.COOKIE保存在客户端. 关于COOKIE在手机上安不安全的问题,以后再讨论. 其实想过在手机上创建文件保存密码,但是,没有时间, ...
java用户登录记住密码_java项目中登陆时记住密码
1.在登陆的时候记住密码,不知自动登陆: 2.登陆页面,填写用户名,密码,点击记住密码,下次进入登陆页面的时候,填写同样的用户名,密码自动填充(在不一次会话的情况下也就是说在不关闭浏览器的情况下): ...
LayUI记住密码功能(已实现)
文章目录前言一.效果与逻辑二.使用步骤 1.html 2.js 三.总结四.补充前言为了提高客户用户体验,每一个管理系统都有自己的记住密码功能.让客户减少账号与密码的输入,从而提高客户的体 ...

vue+elementUl实现登录记住密码功能

效果

思路：

代码解析：

vue+elementUl实现登录记住密码功能相关推荐

最新文章

热门文章