vue項目實現記住密碼功能
一.谷歌瀏覽的殘留問題
現在很多的網站都有一個需求是記住密碼這個功能，為的是避免用戶下次登錄的時候繁瑣的輸入過程。
像是一些主流的瀏覽器（比如Chrome）都有了這個功能，而且如果你登錄了Chrome賬號，會永久的保存在你的賬號中，在任意設備中只要你登錄你的Chrome賬號，都會有你保存的賬號密碼信息。
但是Chrome瀏覽器有一個bug（其實也不是bug，只是人家當初就這么設計的），如果你選擇了保存密碼，在你下次登錄的時候，你的登錄表單會變成黃色，就像這樣：
原因是Chrome瀏覽器在給表單賦值的時候不做dom渲染，而且Chrome會默認給自動填充的input表單加上input:-webkit-autofill私有屬性，然后對其賦予以下樣式：
input:-webkit-autofill { background-color: #FAFFBD; background-image: none; color: #000; }
這就很影響視覺，我們可以自己再寫一套樣式將其覆蓋：
input:-webkit-autofill { -webkit-box-shadow: 0 0 0px 1000px white inset; //使用足夠大的純色內陰影覆蓋黃色背景 border: 1px solid #CCC!important; }
這樣就去掉了谷歌瀏覽器輸入框默認的黃色背景，如果你不想要瀏覽器默認的保存密碼功能，你可以在輸入框前邊再加一個隱藏的輸入框就去掉了該功能
<!-- 賬號 --> <input type="text" style="display:none"></input> <input type="text"></input> <!--密碼--> <input type="password" style="display:none"></input> <input type="password"></input> <!--登錄按鈕--> <button>登錄</button>
二.記住密碼功能的實現
目前，前端實現記住密碼功能有兩種方式：1.瀏覽器自帶保存功能（上邊提到，這個相對安全）2.將登陸信息儲存在cookie中
下面我們說一下第二種方法的實現思路：
1.在向后台提交登陸信息成功后，判斷用戶是否勾選記住密碼，如果勾選，將賬號，密碼以及token（需要封裝攔截器）儲存在cookie中，如果沒勾選，向cookie中存入賬號和密碼字段為空
2.密碼需要加密，目前加密方式有很多種sha1,base64和md5等，我采用的是base64
3.npm安裝base64依賴：
// 安裝 npm install --save js-base64 // 引入 const Base64 = require('js-base64').Base64
4.在頁面加載時從cookie中獲取登錄信息，判斷是否存在，如果存在，需要先將密碼解密，將其賦值給登錄表單，並將記住密碼選擇框勾選
廢話不多說了，直接附上完整代碼：
<template>
<form class="main">
<!-- 賬號 -->
<div class="item">
<label for="account">賬號</label>
<input type="text" style="display:none">
<input type="text" v-model="loginForm.account" id="account">
</div>
<!--密碼-->
<div class="item">
<label for="password">密碼</label>
<input type="password" style="display:none">
<input type="password" v-model="loginForm.password" id="password">
</div>
<!-- 記住密碼 -->
<div class="item">
<label>記住密碼</label>
<input type="checkbox" v-model="loginForm.remember">
</div>
<!--登錄按鈕-->
<button @click="submit">登錄</button>
</form>
</template>
<script>
// 引入base64
const Base64 = require('js-base64').Base64
export default {
data () {
return {
// 登陸表單
loginForm:{
account:'',
password:'',
remember:''
}
}
},
created () {
// 在頁面加載時從cookie獲取登錄信息
let account = this.getCookie("account")
let password = Base64.decode(this.getCookie("password"))
// 如果存在賦值給表單，並且將記住密碼勾選
if(userName){
this.loginForm.account = account
this.loginForm.password = password
this.loginForm.remember = true
}
},
methods: {
// 登錄
submit: function () {
// 點擊登陸向后台提交登陸信息
axios.post("url",this.loginForm).then(res => {
// 儲存token（需要封裝攔截器，將token放入請求頭中）
this.setCookie('token',res.token)
// 跳轉到首頁
this.$router.push('/Index')
// 儲存登錄信息
this.setUserInfo()
})
},
// 儲存表單信息
setUserInfo: function () {
// 判斷用戶是否勾選記住密碼，如果勾選，向cookie中儲存登錄信息，
// 如果沒有勾選，儲存的信息為空
if(this.loginForm.remember){
this.setCookie("account",this.loginForm.account)
// base64加密密碼
let passWord = Base64.encode(this.loginForm.password)
this.setCookie("remember",remember)
}else{
this.setCookie("account","")
this.setCookie("password","")
}
},
// 獲取cookie
getCookie: function (key) {
if (document.cookie.length > 0) {
var start = document.cookie.indexOf(key + '=')
if (start !== -1) {
start = start + key.length + 1
var end = document.cookie.indexOf(';', start)
if (end === -1) end = document.cookie.length
return unescape(document.cookie.substring(start, end))
}
}
return ''
},
// 保存cookie
setCookie: function (cName, value, expiredays) {
var exdate = new Date()
exdate.setDate(exdate.getDate() + expiredays)
document.cookie = cName + '=' + decodeURIComponent(value) +
((expiredays == null) ? '' : ';expires=' + exdate.toGMTString())
},
}
}
</script>
<style>
.main {
width: 300px;
}
.main .item {
display: flex;
align-items: center;
line-height: 30px;
}
.main .item label {
width: 100px;
}
</style>
input:-webkit-autofill { -webkit-box-shadow: 0 0 0px 1000px white inset; //使用足夠大的純色內陰影覆蓋黃色背景 border: 1px solid #CCC!important; }
這樣就去掉了谷歌瀏覽器輸入框默認的黃色背景，如果你不想要瀏覽器默認的保存密碼功能，你可以在輸入框前邊再加一個隱藏的輸入框就去掉了該功能
<!-- 賬號 --> <input type="text" style="display:none"></input> <input type="text"></input> <!--密碼--> <input type="password" style="display:none"></input> <input type="password"></input> <!--登錄按鈕--> <button>登錄</button>
二.記住密碼功能的實現
目前，前端實現記住密碼功能有兩種方式：1.瀏覽器自帶保存功能（上邊提到，這個相對安全）2.將登陸信息儲存在cookie中
下面我們說一下第二種方法的實現思路：
1.在向后台提交登陸信息成功后，判斷用戶是否勾選記住密碼，如果勾選，將賬號，密碼以及token（需要封裝攔截器）儲存在cookie中，如果沒勾選，向cookie中存入賬號和密碼字段為空
2.密碼需要加密，目前加密方式有很多種sha1,base64和md5等，我采用的是base64
3.npm安裝base64依賴：
// 安裝 npm install --save js-base64 // 引入 const Base64 = require('js-base64').Base64
4.在頁面加載時從cookie中獲取登錄信息，判斷是否存在，如果存在，需要先將密碼解密，將其賦值給登錄表單，並將記住密碼選擇框勾選
廢話不多說了，直接附上完整代碼：
<template>
<form class="main">
<!-- 賬號 -->
<div class="item">
<label for="account">賬號</label>
<input type="text" style="display:none">
<input type="text" v-model="loginForm.account" id="account">
</div>
<!--密碼-->
<div class="item">
<label for="password">密碼</label>
<input type="password" style="display:none">
<input type="password" v-model="loginForm.password" id="password">
</div>
<!-- 記住密碼 -->
<div class="item">
<label>記住密碼</label>
<input type="checkbox" v-model="loginForm.remember">
</div>
<!--登錄按鈕-->
<button @click="submit">登錄</button>
</form>
</template>
<script>
// 引入base64
const Base64 = require('js-base64').Base64
export default {
data () {
return {
// 登陸表單
loginForm:{
account:'',
password:'',
remember:''
}
}
},
created () {
// 在頁面加載時從cookie獲取登錄信息
let account = this.getCookie("account")
let password = Base64.decode(this.getCookie("password"))
// 如果存在賦值給表單，並且將記住密碼勾選
if(userName){
this.loginForm.account = account
this.loginForm.password = password
this.loginForm.remember = true
}
},
methods: {
// 登錄
submit: function () {
// 點擊登陸向后台提交登陸信息
axios.post("url",this.loginForm).then(res => {
// 儲存token（需要封裝攔截器，將token放入請求頭中）
this.setCookie('token',res.token)
// 跳轉到首頁
this.$router.push('/Index')
// 儲存登錄信息
this.setUserInfo()
})
},
// 儲存表單信息
setUserInfo: function () {
// 判斷用戶是否勾選記住密碼，如果勾選，向cookie中儲存登錄信息，
// 如果沒有勾選，儲存的信息為空
if(this.loginForm.remember){
this.setCookie("account",this.loginForm.account)
// base64加密密碼
let passWord = Base64.encode(this.loginForm.password)
this.setCookie("remember",remember)
}else{
this.setCookie("account","")
this.setCookie("password","")
}
},
// 獲取cookie
getCookie: function (key) {
if (document.cookie.length > 0) {
var start = document.cookie.indexOf(key + '=')
if (start !== -1) {
start = start + key.length + 1
var end = document.cookie.indexOf(';', start)
if (end === -1) end = document.cookie.length
return unescape(document.cookie.substring(start, end))
}
}
return ''
},
// 保存cookie
setCookie: function (cName, value, expiredays) {
var exdate = new Date()
exdate.setDate(exdate.getDate() + expiredays)
document.cookie = cName + '=' + decodeURIComponent(value) +
((expiredays == null) ? '' : ';expires=' + exdate.toGMTString())
},
}
}
</script>
<style>
.main {
width: 300px;
}
.main .item {
display: flex;
align-items: center;
line-height: 30px;
}
.main .item label {
width: 100px;
}
</style>
