前端vue+elementUI如何實(shí)現(xiàn)記住密碼功能
我們這回使用純前端保存密碼
既然是記住密碼,前端也就是使用cookie保存,訪問時(shí)用cookie讀取
先來了解下cookie的基本使用吧
Cookie
所有的cookie信息都在document.cookie中存放著,是一個(gè)字符串,里面的cookie以分號(hào)和空格分隔。就像這樣:
"key1=value1; key2=value2; key3=value3" // 使用document.cookie 來獲取所有cookie docuemnt.cookie = "id="+value
操作cookie
/**
* 設(shè)置cookie值
*
* @param {String} name cookie名稱
* @param {String} value cookie值
* @param {Number} expiredays 過期時(shí)間,天數(shù)
*/
function setCookie (name, value, expiredays) {
let exdate = new Date()
//setDate獲取N天后的日期
exdate.setDate(exdate.getDate() + expiredays) //getDate() 獲取當(dāng)前月份的日 + 過期天數(shù)
document.cookie =name+"="+encodeURI(value)+";path=/;expires="+exdate.toLocaleString()
}
/**
* 獲取cookie值
* @param {String} name cookie名稱
*/
function getCookie (name) {
var arr = document.cookie.split(";") //轉(zhuǎn)換數(shù)組
//["_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) //設(shè)置cookie
return getCookie(name).includes(value) //includes 判斷數(shù)組name中是否含有當(dāng)前value(返回true or false)
}
好了了解了cookie我們開始如何實(shí)現(xiàn)一個(gè)簡(jiǎn)單的記住密碼功能
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: '請(qǐng)輸入您的帳戶', trigger: 'blur'}],
password: [{required: true, message: '請(qǐng)輸入您的密碼', 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){ //賬號(hào),密碼 ,過期的天數(shù)
var exdate = new Date()
console.log(c_name,c_pwd)
exdate.setTime(exdate.getTime() + 24 * 60 * 60 * 1000 * exdate) //保存的天數(shù)
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 ^
總結(jié)
到此這篇關(guān)于前端vue+elementUI如何實(shí)現(xiàn)記住密碼功能的文章就介紹到這了,更多相關(guān)vue+elementUI記住密碼內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
- vue+element+oss實(shí)現(xiàn)前端分片上傳和斷點(diǎn)續(xù)傳
- vue+Element-ui前端實(shí)現(xiàn)分頁效果
- vue+elementUI組件table實(shí)現(xiàn)前端分頁功能
- 詳解Vue+Element的動(dòng)態(tài)表單,動(dòng)態(tài)表格(后端發(fā)送配置,前端動(dòng)態(tài)生成)
- 搭建element-ui的Vue前端工程操作實(shí)例
- 利用vue + element實(shí)現(xiàn)表格分頁和前端搜索的方法
- Vue模仿ElementUI的form表單實(shí)例代碼
- vue3.0中使用element的完整步驟
- Vue Element前端應(yīng)用開發(fā)之開發(fā)環(huán)境的準(zhǔn)備工作
相關(guān)文章
vue的style綁定background-image的方式和其他變量數(shù)據(jù)的區(qū)別詳解
今天小編就為大家分享一篇vue的style綁定background-image的方式和其他變量數(shù)據(jù)的區(qū)別詳解,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-09-09
Vue實(shí)現(xiàn)父子組件頁面刷新的幾種常用方法
很多時(shí)候我們?cè)诓僮鬟^頁面時(shí)候,特別是增刪改操作之后,數(shù)據(jù)會(huì)有所改變,本文主要介紹了Vue實(shí)現(xiàn)父子組件頁面刷新的幾種常用方法,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2022-04-04
Vue項(xiàng)目本地沒有問題但部署到服務(wù)器上提示錯(cuò)誤(問題解決方案)
一個(gè) VUE 的項(xiàng)目在本地部署沒有問題,但是部署到服務(wù)器上的時(shí)候提示訪問資源的錯(cuò)誤,遇到這樣的問題如何解決呢?下面小編給大家?guī)砹薞ue項(xiàng)目本地沒有問題但部署到服務(wù)器上提示錯(cuò)誤的解決方法,感興趣的朋友一起看看吧2023-05-05

