前端vue+elementUI如何實現記住密碼功能
我們這回使用純前端保存密碼
既然是記住密碼,前端也就是使用cookie保存,訪問時用cookie讀取
先來了解下cookie的基本使用吧
Cookie
所有的cookie信息都在document.cookie中存放著,是一個字符串,里面的cookie以分號和空格分隔。就像這樣:
"key1=value1; key2=value2; key3=value3" // 使用document.cookie 來獲取所有cookie docuemnt.cookie = "id="+value
操作cookie
/** * 設置cookie值 * * @param {String} name cookie名稱 * @param {String} value cookie值 * @param {Number} expiredays 過期時間,天數 */ function setCookie (name, value, expiredays) { let exdate = new Date() //setDate獲取N天后的日期 exdate.setDate(exdate.getDate() + expiredays) //getDate() 獲取當前月份的日 + 過期天數 document.cookie =name+"="+encodeURI(value)+";path=/;expires="+exdate.toLocaleString() } /** * 獲取cookie值 * @param {String} name cookie名稱 */ function getCookie (name) { var arr = document.cookie.split(";") //轉換數組 //["_ga=GA1.1.1756734561.1561034020", " mobile=123" password=456"] for(var i=0;i<arr.length;i++){ var arr2 = arr[i].split('='); // ["_ga", "GA1.1.1756734561.1561034020"] if(arr2[0].trim() == name){ return arr2[1] } } } /** * 刪除指定cookie值 * @param {String} name cookie名稱 */ function clearCookie (name) { setCookie(name, '', -1) } /** * 瀏覽器是否支持本地cookie */ function isSupportLocalCookie () { let {name, value} = {name: 'name', value: 'mingze'} setCookie(name, value, 1) //設置cookie return getCookie(name).includes(value) //includes 判斷數組name中是否含有當前value(返回true or false) }
好了了解了cookie我們開始如何實現一個簡單的記住密碼功能
HTML代碼
<el-form :model="ruleForm" :rules="rules" status-icon ref="ruleForm" label-position="left" label-width="0px" class="demo-ruleForm login-page"> <h3 class="title">系統(tǒng)登錄</h3> <el-form-item prop="username"> <el-input type="text" v-model="ruleForm2.username" auto-complete="off" placeholder="用戶名" ></el-input> </el-form-item> <el-form-item prop="password"> <el-input type="password" v-model="ruleForm2.password" auto-complete="off" placeholder="密碼" ></el-input> </el-form-item> <el-checkbox v-model="checked" style="color:#a0a0a0;margin:0 0 20px 0">記住密碼</el-checkbox> <el-form-item style="width:100%;"> <el-button type="primary" style="width:100%;" @click="handleSubmit" :loading="logining">登錄 </el-button> </el-form-item> </el-form>
vue代碼
data(){ return { logining: false, checked: true ruleForm: { username: '', password: '', }, rules: { username: [{required: true, message: '請輸入您的帳戶', trigger: 'blur'}], password: [{required: true, message: '請輸入您的密碼', trigger: 'blur'}] }, } }, mounted() { this.account() //獲取cookie的方法 }, account(){ if(document.cookie.length <= 0){ console.log(this.getCookie('mobile')) this.ruleForm.username = this.getCookie('mobile') this.ruleForm.password = this.getCookie('password') } }, setCookie(c_name,c_pwd,exdate){ //賬號,密碼 ,過期的天數 var exdate = new Date() console.log(c_name,c_pwd) exdate.setTime(exdate.getTime() + 24 * 60 * 60 * 1000 * exdate) //保存的天數 document.cookie ="mobile="+c_name+";path=/;expires="+exdate.toLocaleString() document.cookie ="password="+c_pwd+";path=/;expires="+exdate.toLocaleString() }, getCookie(name){ var arr = document.cookie.split(";") //["_ga=GA1.1.1756734561.1561034020", " mobile=123" password=456"] for(var i=0;i<arr.length;i++){ var arr2 = arr[i].split('='); // ["_ga", "GA1.1.1756734561.1561034020"] if(arr2[0].trim() == name){ return arr2[1] } } }, clearCookie(){ this.setCookie("","",-1) //清除cookie }, handleSubmit(){ //提交登錄 this.$refs.ruleForm.validate((valid) => { if(valid){ this.logining = true; var _this = this; if(_this.checked == true){ //存入cookie _this.setCookie(_this.ruleForm.username,_this.ruleForm.password,7) //保存7天 }else{ _this.clearCookie(); } Login({ mobile:_this.ruleForm.username, password:_this.ruleForm.password }).then((result) => { console.log(result) _this.$alert('登陸成功') }) } }
好了,這回的記住密碼就到這里,小伙伴們一起努力吧 ^ 0 ^
總結
到此這篇關于前端vue+elementUI如何實現記住密碼功能的文章就介紹到這了,更多相關vue+elementUI記住密碼內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家!
相關文章
vue的style綁定background-image的方式和其他變量數據的區(qū)別詳解
今天小編就為大家分享一篇vue的style綁定background-image的方式和其他變量數據的區(qū)別詳解,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09Vue項目本地沒有問題但部署到服務器上提示錯誤(問題解決方案)
一個 VUE 的項目在本地部署沒有問題,但是部署到服務器上的時候提示訪問資源的錯誤,遇到這樣的問題如何解決呢?下面小編給大家?guī)砹薞ue項目本地沒有問題但部署到服務器上提示錯誤的解決方法,感興趣的朋友一起看看吧2023-05-05