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>