溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
使用vue+elementUI如何實現記住密碼功能？相信很多沒有經驗的人對此束手無策，為此本文總結了問題出現的原因和解決方法，通過這篇文章希望你能解決這個問題。
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"> <h4 class="title">系統登錄</h4> <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" >記住密碼</el-checkbox> <el-form-item > <el-button type="primary" @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('登陸成功')
})
}
}看完上述內容，你們掌握使用vue+elementUI如何實現記住密碼功能的方法了嗎？如果還想學到更多技能或想了解更多相關內容，歡迎關注億速云行業資訊頻道，感謝各位的閱讀！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
