本文详细阐述了在前端实现密码保存功能的步骤，涉及localStorage、sessionStorage和cookie的选择，重点讨论了使用localStorage并采用Base64加密方法确保密码安全。在用户登录时，通过随机字符串混淆加密后的密码，增强了安全性。同时，展示了Vue.js组件实现的登录界面及密码保存功能，包括是否保存密码的提示和下次自动填充。文章最后提到了项目的局限性和运行要求。
web前端登录密码保存业务
一.首先要想实现密码保存业务这个需求，首先要明白localstorage,sessionStorage,以及cookie三者之间的区别，为什么要明白这三者之间的联系呢，是应为我们要将密码保存在这里面，以实现我们为您在进行网页登录时或者刷新的时候，不用输入再次密码便可以直接登录进来
（1）localStorage储存空间很大，可以达到5M；存储时间长，不去手动清除localStorage值会一直在，可以自己根据存储时间手动设定保留时间
① 设置localStorage
if(!window.localStorage){
console.log("浏览器不支持localstorage");
}else{
//主逻辑业务
localStorage.setItem(name, val);
}
② 获取localStorage
if(!window.localStorage){
console.log("浏览器不支持localstorage");
}else{
//主逻辑业务
localStorage.getItem(name);
}
③ 清除localStorage
if(!window.localStorage){
console.log("浏览器不支持localstorage");
}else{
//主逻辑业务
localStorage.removeItem(name);
}
（2）sessionStorage使用大体上和localStorage一样，sessionStorage有他唯一的特性就是，关闭浏览器后自动清除sessionStorage的值,同一个浏览器可以开多个窗口，同时每个窗口都可以拿到sessionStorage值。
（3）cookie的expires可以配置cookie保留时间，不设置的保留时间的话关闭浏览器就会自动清除
import Cookies from 'js-cookie'
设置cookie
Cookies.set(name, value);
获取cookie
Cookies.get(name)
清除cookie
Cookies.remove(name)
先在这里声明一下，该业务需求用cookie的存值方法会好很多，但是由于我比较懒，在这里我用了localstorage的存值方式，来做测试
二 我们要明白在往localstorage中存值的时候，不能够以铭文的方式存放，应为如果这样，被非法有心人看到，就可以直接拿走你的密码，接下来的过程中，我将对我们要存入的密码进行加密，然后在进行保存，加密的方式有两种，一种为md5加密，另一种为Base64加密，我们都是md5加密是不可逆的，虽然说针对一些简单的有可逆，但谁会设置那么简单的密码呢，所以我就在在这里采用了Base64加密方法。
-
安装：
npm install --save js-base64 -
在需要使用的组件中直接引入
let Base64 = require('js-base64').Base64; -
使用：
Base64.encode('123456789') //加密后: MTIzNDU2Nzg5 Base64.encode('abcdf1564.') //加密后：YWJjZGYxNTY0Lg== Base64.decode('MTIzNDU2Nzg5') //解密后 ： 123456789 Base64.decode('YWJjZGYxNTY0Lg==') //解密后 ： abcdf1564.
三.考虑到加密之后的密码仍然可以破译，你可以解码，人家拿到你的这个值，也同样可以解码，那就有人很疑惑了，怎么办呢，我们可以对这个加密后的密码拼接上一些字符串，参杂一些英文字母大小写，以及数字组合，并让他们随机得产生，拼接上之后我们再去保存我们的这个值，这样就算别人拿到也无法破译，但要拿取得时候切记这个值不可以直接使用，要对拿到得这个值进行截取。截取之后在解码，然后才可以使用。下面我就来一步步得实现，在这里我使用了组件,就不多介绍了,耐心看完哦。
<template>
<div class="body">
<div class="verify">
<el-form label-width="4rem" :model="ruleForm" status-icon :rules="rules" ref="ruleForm">
<el-form-item label="账号" prop="phone">
<el-input
v-model="ruleForm.phone"
placeholder="请输入账号"
type="number"
inline-message="true"
autocomplete="off"
></el-input>
</el-form-item>
<el-form-item label="密码"
prop="password"
>
<el-input
v-model="ruleForm.password"
placeholder="请输入密码"
type="password"
autocomplete="off"
></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" size="medium" @click="login"
>登录</el-button
>
</el-form-item>
</el-form>
<div class="save" v-show="ruleForm.bool">
是否保存登陆的信息
<input type="number" v-model="ruleForm.phone">
<input type="password" v-model="ruleForm.password"><br>
<div class="flex">
<van-button @click="cloceTure" type="primary" size="small">取消</van-button>
<van-button @click="cloceFalse" type="primary" size="small">确定</van-button>
</div>
</div>
</div>
</div>
</template>
<script>
let Base64 = require('js-base64').Base64;
export default {
data() {
var checkphone = (rule, value, callback) => {
if (!value) {
return callback(new Error('账号不能为空'));
}
}
var validatePass = (rule, value, callback) => {
if (value === '') {
callback(new Error('请输入密码'));
}
};
return {
ruleForm: {
phone: "",
password: "",
bool:false,//用于显示是否保存账号密码
},
rules: {
password: [
{ validator: validatePass, trigger: 'blur' }
],
phone: [
{ validator: checkphone, trigger: 'blur' }
]
},
};
},
methods: {
login() {
let phone = this.ruleForm.phone;
let password = this.ruleForm.password;
let url = "http://localhost:5000/login";//发送请求
this.axios.post(url, { phone, password }).then((res) => {
if (res.data.code == 200) {
let newuser=this.ruleForm.phone//获取新值
let olduser=localStorage.getItem('key')//获取localstorage中的值
if(newuser==olduser){//新值等于旧值 直接跳转
Toast('登陆成功');
this.$router.push('/')
}else if(localStorage.getItem('key')==null){//localstorage中的值为空,则询问用户是否保存改值
this.ruleForm.bool=true
}else{
this.ruleForm.bool=true//如果新值不等于旧值，询问用户是否保存该值
}
} else {
Toast.fail('输入有误');
}
console.log(res);
});
},
// 随机生成一串字母数字组合
randomWord(num){
var str = "",
arr = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', 'a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l', 'm', 'n', 'o', 'p', 'q', 'r', 's', 't', 'u', 'v', 'w', 'x', 'y', 'z', 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z'];
let pos;
for(var i=0; i<num; i++){
pos = Math.round(Math.random() * (arr.length-1));
str += arr[pos];
}
return str;
},
cloceTure() {
// 点击取消跳转
this.ruleForm.bool=false
this.$router.push('/')
},
cloceFalse(){
// 点击确定按钮，将值保存
localStorage.setItem('key',this.ruleForm.phone)
// 调用函数将密码进行加密处理
let random=this.randomWord(11)
let encryption=random+Base64.encode(this.ruleForm.password)
// 将加密之后的密码保存在localstorage中
localStorage.setItem('val',encryption)
Toast('登陆成功');
this.ruleForm.bool=false
this.$router.push('/')
}
},
mounted () {
// 页面一加载就将值赋给输入框
let val1=localStorage.getItem('key')
let val2=localStorage.getItem('val')
// 为了避免空指针报错
if(val1 == null || val2 == null) return
// 获取到localstorage中的值进行解密
this.ruleForm.phone=val1
let decrypt=val2.slice(11)
// 解密之后将值传给输入框
this.ruleForm.password=Base64.decode(decrypt)
},
}
</script>
<style lang="scss" scoped>
<style lang="scss" scoped>
.body{
box-sizing: border-box;
padding: 2rem;
box-shadow: 0.5rem 0.5rem 5px #cccccc;
}
.verify {
width: 80%;
}
.el-button {
width: 100%;
}
.save{
margin: auto;
width: 80%;
background-color: rgb(246, 238, 238);
input{
width: 95%;
margin-top: 1.5rem;
}
.flex{
display: flex;
justify-content: space-between;
.van-button{
margin-top: 0.5rem;
}
}
}
</style>
四：能看到这里真的很不容易，提前恭喜下你自己，实现后的大致效果图
-
刚进来时看到得效果
-
点击登录时会发送请求，同时会询问你是否保存本次密码，点击取消则不保存，跳转首页，点击保存，会将值存放在localStroage中，注意这时是已经加过密得啦!
-
跳转首页
-
val 为你保存得密码 key为你登陆时得账号
-
下次登录时，输入框会直接显示你的账号跟密码，不管刷新还是关闭浏览器只要你一点开这个页面输入框里就为你之前输入得值,直接登录即可
!
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
