Vue如何实现登录页面记住账号密码功能的长尾关键词？

本文共计874个文字，预计阅读时间需要4分钟。

目录+实现思路+这里有三种方法来存储账号密码：- 功能界面+记录账号密码功能的整体实现+密码加密+localStorage+cookies总结+实现思路+用户登录时若勾选记住我功能选项，则将登录名存储

目录

• 实现思路
• 这里有三种方法来存储账号密码：
• 功能界面
• 记住账号密码功能的具体实现
• 密码加密
• localStorage
• cookies
• 总结

实现思路

用户登录时若勾选“记住我”功能选项，则将登录名和密码（加密后）保存至本地缓存中，下次登录页面加载时自动获取保存好的账号和密码（需解密），回显到登录输入框中。

这里有三种方法来存储账号密码：

1. sessionStorage(不推荐)

1). 仅在当前会话下有效，关闭浏览器窗口后就被清除了

2). 存放数据大小一般为5MB

3). 不与服务器进行交互通信

2. localStorage

1). 除非主动清除localStorage里的信息，否则将永远存在，关闭浏览器窗口后下次启动任然存在

2). 存放数据大小一般为5MB

3). 不与服务器进行交互通信

3. cookies

1). 可以手动设置过期时间，超过有效期则失效。未设置过期时间，关闭浏览器窗口后就被清除了

2). 存放数据大小一般为4K

3). 每次请求都会被传送到服务器

这里主要介绍第二种和第三种的使用方法。

功能界面

<el-form :model="loginForm" :rules="rules" ref="loginForm" label-width="100px" class="loginForm demo-ruleForm"> <!-- 账号 --> <el-form-item label="账号" prop="userId" autocomplete="on"> <el-input v-model="loginForm.userId" placeholder="请输入账号"></el-input> </el-form-item> <!-- 密码 --> <el-form-item label="密码" prop="password"> <el-input type="password" v-model="loginForm.password" placeholder="请输入密码" @keyup.enter="submitForm('loginForm')"></el-input> </el-form-item> <div class="tip"> <!-- 记住我 --> <el-checkbox v-model="checked" class="rememberMe">记住我</el-checkbox> <!-- 找回密码 --> <el-button type="text" @click="open()" class="forgetPw">忘记密码？</el-button> </div> <!-- 登录 --> <el-form-item> <el-button type="primary" @click="submitForm('loginForm')" class="submit-btn">登录</el-button> </el-form-item> </el-form>

记住账号密码功能的具体实现

密码加密

为提高安全性，密码存储前需进行加密处理。目前加密方式有很多种，我这里选用了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"); } /* ------ www.558idc.com/kt.html欢迎留下您的宝贵建议】