vue項目實現記住密碼功能

阿新 • • 發佈：2019-05-17

ken spa tst 粉絲 under bdcs add checkbox 評論

一.谷歌瀏覽的殘留問題

　　現在很多的網站都有一個需求是記住密碼這個功能，為的是避免用戶下次登錄的時候繁瑣的輸入過程。

　　像是一些主流的瀏覽器（比如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中

下面我們說一下第二種方法的實現思路：

　　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>

標簽: vue記住密碼, 記住密碼, vue, 前端好文要頂關註我收藏該文技術分享圖片

俗的太不一樣
關註 - 7
粉絲 - 18 +加關註 1 0 « 上一篇：js數組遍歷（for in ,for of ,map,foreach,filter）的區別
» 下一篇：vue項目使用websocket技術 posted @ 2018-12-30 17:40 俗的太不一樣閱讀(1143) 評論(0) 編輯收藏

vue項目實現記住密碼功能

ken spa tst 粉絲 under bdcs add checkbox 評論一.谷歌瀏覽的殘留問題　　現在很多的網站都有一個需求是記住密碼這個功能，為的是避免用戶下次登錄的時候繁瑣的輸入過程。　　像是一些主流的瀏覽器（比如Chrome）都有了這個功能，而且如

vue項目實現記住密碼功能

vue項目實現記住密碼功能

vue項目實現記住密碼到cookie功能(附源碼)

vue簡單實現記住密碼功能

Vue 項目實現微信分享的自定義分享鏈接問題解決

javaweb實現記住密碼功能

Android：用SharePreferences實現記住密碼功能

vue項目實現列表頁-詳情頁返回不刷新，再點其他菜單項返回刷新的需求

【Vue】Cookie實現登入記住密碼功能

webpack搭建vue項目，實現腳手架功能

前端框架Vue.js——vue-i18n ，vue項目中如何實現國際化

轉：如何在Vue項目中使用vw實現移動端適配

Java使用SSM框架實現登錄頁面記住密碼功能

Vue項目中實現用戶登錄及token驗證

web實現登入，記住密碼功能（cookie）

Android編寫一個登入介面，利用資料庫實現記住密碼，註冊賬號，強制下線，以及類似QQ的下拉列表登入功能

vue中使用cookies和crypto-js實現記住密碼和加密

實現登入時的記住密碼功能

vue localStorage 實現記住密碼

vue記住密碼功能

android用SharedPreferences實現登入時記住密碼功能

vue項目實現記住密碼功能

相關推薦