Vue实现登录记住账号密码功能 |
您所在的位置：网站首页 › 如何设置记住账号和密码 › Vue实现登录记住账号密码功能 |
Vue实现登录记住账号密码功能
|
实现思路
用户登录时若勾选“记住我”功能选项，则将登录名和密码（加密后）保存至本地缓存中，下次登录页面加载时自动获取保存好的账号和密码（需解密），回显到登录输入框中。 这里有三种方法来存储账号密码： 1. sessionStorage(不推荐) 1). 仅在当前会话下有效，关闭浏览器窗口后就被清除了 2). 存放数据大小一般为5MB 3). 不与服务器进行交互通信 2. localStorage 1). 除非主动清除localStorage里的信息，否则将永远存在，关闭浏览器窗口后下次启动任然存在 2). 存放数据大小一般为5MB 3). 不与服务器进行交互通信 3. cookies 1). 可以手动设置过期时间，超过有效期则失效。未设置过期时间，关闭浏览器窗口后就被清除了 2). 存放数据大小一般为4K 3). 每次请求都会被传送到服务器这里主要介绍第二种和第三种的使用方法。 功能界面为提高安全性，密码存储前需进行加密处理。目前加密方式有很多种，我这里选用了base64。 npm安装base64依赖 //安装 npm install --save js-base64 //引入 const Base64 = require("js-base64").Base64 localStorage export default { data() { return { loginForm: { userId: "", password: "", }, checked: false, }; }, mounted() { let username = localStorage.getItem("userId"); if (username) { this.loginForm.userId = localStorage.getItem("userId"); this.loginForm.password = Base64.decode(localStorage.getItem("password"));// base64解密 this.checked = true; } }, methods: { submitForm(formName) { this.$refs[formName].validate((valid) => { if (valid) { /* ------ 账号密码的存储 ------ */ if (this.checked) { let password = Base64.encode(this.loginForm.password); // base64加密 localStorage.setItem("userId", this.loginForm.userId); localStorage.setItem("password", password); } else { localStorage.removeItem("userId"); localStorage.removeItem("password"); } /* ------ http登录请求 ------ */ } else { console.log("error submit!!"); return false; } }); }, }, }; |
【本文地址】