快捷導(dǎo)航

Vue+element+cookie記住密碼功能的簡(jiǎn)單實(shí)現(xiàn)方法

更新時(shí)間：2020年09月20日 09:09:14 作者：WByangqq

這篇文章主要給大家介紹了Vue+element+cookie記住密碼功能的簡(jiǎn)單實(shí)現(xiàn)方法，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧

實(shí)現(xiàn)功能：

1、登錄時(shí)勾選記住密碼，用cookie保存賬號(hào)和密碼并對(duì)密碼進(jìn)行兩次加密處理（純前端），下次登錄自動(dòng)輸入賬號(hào)密碼

2、登錄時(shí)不勾選，清空cookie，下次登錄需要輸入

效果圖：

=============================================================================================================================================================================================

Html

 <div class="login-form-item">
     <el-form :model="ValidateForm" ref="ValidateForm" label-width="100px" class="demo-ruleForm">
      <el-form-item

        prop="username"
        :rules="[{ required: true, message: '用戶名不能為空'}
      ]">
       <span><i class="el-icon-user"></i></span><el-input type="username" v-model.number="ValidateForm.username" autocomplete="off" clearable placeholder="用戶名"></el-input>
      </el-form-item>
      <br>
      <el-form-item

        prop="password"
        :rules="[{ required: true, message: '密碼不能為空'},
      ]">
       <span><i class="el-icon-lock"></i></span><el-input type="password" v-model.number="ValidateForm.password" autocomplete="off" clearable show-password placeholder="密碼"></el-input>
      </el-form-item>
      <br>
      <el-form-item

        prop="sidentify"
        :rules="[
{ required: true, message: '驗(yàn)證碼不能為空'},]"
      >
       <el-row class="sidentify">
        <el-col :span="21">
         <el-input type="age" v-model="ValidateForm.sidentify" autocomplete="off" placeholder="驗(yàn)證碼"></el-input>
        </el-col>
        <el-col :span="3" class="sidentify sidentify-img">
         <sidentify :changeCode.sync='identifyCode' ref="switchSidentify"></sidentify>
        </el-col>
       </el-row>
      </el-form-item>
      <el-form-item>
       <el-checkbox v-model="checked" class="sidentify">記住密碼</el-checkbox>
      </el-form-item>
      <el-form-item>
       <el-button type="primary" @click="submitForm('ValidateForm')" class="login-btn">登錄</el-button>
      </el-form-item>
     </el-form>
    </div>

加密方法我用的base64和CryptoJS 大家記得去下載

js部分：

登錄

// 登錄
submitForm(formName) {
 this.$refs[formName].validate((valid) => {
  if (valid) {
   let username=this.ValidateForm.username;
   let pwd=this.ValidateForm.password;
   let sidentify=this.ValidateForm.sidentify;
   // 驗(yàn)證碼通過(guò)
   if (sidentify == this.identifyCode){
    this.request.post(this.api.login.logindo,{username:username,pwd:pwd}).then((res)=>{
     console.log(res);
     if (res.data.code == 200){
      this.$message({
       message : '登錄成功！',
       type : 'success'
      })
      //調(diào)用check選中方法
      this.checkedPwd(username,pwd)
      this.$router.push({name:'Home'})
     }else {
      this.$message({
       message : '賬號(hào)或密碼錯(cuò)誤，請(qǐng)重新輸入！',
       type : 'error'
      })
      //清空
      this.resetForm('ValidateForm')
      //刷新驗(yàn)證碼
      this.$refs.switchSidentify.changeCode()
     }
    })
   }else {
    this.$message({
     message : '驗(yàn)證碼輸入錯(cuò)誤，請(qǐng)重新輸入！',
     type : 'error'
    })
    this.$refs.switchSidentify.changeCode()
    this.resetForm('ValidateForm')
   }
  } else {
   return false;
  }
 });
},

check方法：

checkedPwd(username,pwd){
 // 記住密碼進(jìn)行cookie存儲(chǔ)和密碼加密
 if (this.checked){
  // base64 加密
  let base64Pwd=Base64.encode(pwd);
  // Encrypt 加密
  let cryptoJsPwd=CryptoJS.AES.encrypt(base64Pwd,key).toString()
  // 賬號(hào)密碼保存天數(shù)
  this.setCookie(username,cryptoJsPwd,7)
 }else{
  // 清空
  this.clearCookie()
 }
},

設(shè)置讀取和清空cookie

// 設(shè)置cookie
setCookie(c_name, c_pwd, exdays) {
 var exdate = new Date(); // 獲取時(shí)間
 exdate.setTime(exdate.getTime() + 24 * 60 * 60 * 1000 * exdays); // 保存的天數(shù)
 // 字符串拼接cookie
 window.document.cookie = "username" + "=" + c_name + ";path=/;expires=" + exdate.toGMTString();
 window.document.cookie = "password" + "=" + c_pwd + ";path=/;expires=" + exdate.toGMTString();
},
// 讀取cookie
getCookie: function() {
 if (document.cookie.length > 0) {
  //checked為true
  this.checked=true
  var arr = document.cookie.split('; ');
  for (var i = 0; i < arr.length; i++) {
   var arr2 = arr[i].split('=');
   if (arr2[0] == 'username') {
    this.ValidateForm.username = arr2[1];
   } else if (arr2[0] == 'password') {
    // Decrypt 解密
    let bytes = CryptoJS.AES.decrypt(arr2[1],key)
    let originalText=bytes.toString(CryptoJS.enc.Utf8)
    // base64解密
    let pwd=Base64.decode(originalText)
    this.ValidateForm.password = pwd;
   }
  }
 }
},
// 清除cookie
clearCookie: function() {
 this.setCookie("", "", -1); // 修改2值都為空，天數(shù)為負(fù)1天就好了
},

一定要?jiǎng)?chuàng)建后讀取cookie

created () {
 this.getCookie()
},

總結(jié)

到此這篇關(guān)于Vue+element+cookie記住密碼功能的簡(jiǎn)單實(shí)現(xiàn)方法文章就介紹到這了,更多相關(guān)Vue+element+cookie記住密碼功能內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: