技術標籤：vue.js

Vue使用Cookie實現記住密碼功能？

實現功能：
1.不勾選，點選登陸後，輸入框中的值會被清空，下次登陸需要手動輸入
2.記住密碼勾選，點登陸後，將賬號和密碼儲存到cookie，下次登陸自動顯示到登入框內

實現思路：
通過存/取/刪cookie實現的；
取：每次進入登入頁，先去讀取cookie，如果瀏覽器的cookie中有賬號資訊，就自動填充到登入框中，如果沒有就需要使用者手動輸入。
存：cookie是在登入成功之後，判斷當前使用者是否勾選了記住密碼，如果勾選了，則把賬號資訊存到cookie當中，反之則不儲存。
刪：執行cookie的setCookie方法清空賬戶資訊。

1.html部分

程式碼如下（示例）：

<el-form
            :model="loginForm"
            status-icon
            ref="loginForm"
            class="login-form"
          >
            <el-form-item prop="username">
              <el-input
                type="text"
 

                v-model="loginForm.username"
                autocomplete="off"
                placeholder="使用者名稱/手機號"
                clearable
              >
              <i slot="prefix" class="el-input__icon el-icon-user"></i>
              <
 
/el-input>
            </el-form-item>
            <span class="form-tip" v-if="isshow">使用者名稱或密碼不能為空</span>
            <el-form-item prop="password" style="margin: 0">
              <el-input
                type="password"
                v-model="loginForm.password"
                autocomplete="off"
                placeholder="密碼"
                clearable
              >
              <i slot="prefix" class="el-input__icon el-icon-lock"></i>
              </el-input>
            </el-form-item>
             <div class="check-area">
                <el-checkbox v-model="isChecked">記住密碼</el-checkbox>
             </div>
            <el-button type="primary" @click="login" class="login-btn">登入</el-button>
          </el-form>

2.js部分

程式碼如下（示例）：

 data() {
    return {
      loginForm: {},
      isChecked: false,
      isshow: false
    };
  },
  created(){
    if(localStorage.getItem('isChecked') == 'true'){
      this.getCookie();
      this.isChecked = true
    }
  },
  methods: {
    login() {
      // 當用戶名或者密碼為空的時候出現提示
      if(!this.loginForm.username || !this.loginForm.password){
        this.isshow = true
      } else {
        this.isshow = false
        this.apis.getLogin({
          password: this.loginForm.password,
          loginName: this.loginForm.username
        }).then(res=>{
          let {code,msg,data} = res
          if(code == 0){
              //判斷複選框是否被勾選 勾選則呼叫配置cookie方法
            if (this.isChecked == true) {
              this.setCookie(this.loginForm.username, this.loginForm.password, 7);
            } else {
              this.clearCookie()
            } 
            this.$message.success("登陸成功！")
            this.$router.push({ path: '/currentData' });
            localStorage.setItem('isChecked',this.isChecked)
            localStorage.setItem('userInfo',JSON.stringify(data))
          }else{
            this.$message.error("登入失敗！")
          }
        })  
      }
    },
    setCookie(cname,cpwd,cdays) {
      //獲取當前時間
      var curDate = new Date();
      //設定7天過期時間
      curDate.setTime(curDate.getTime() + 24*60*60*1000*curDate*cdays);
      //字串拼接cookie
      window.document.cookie = "username"+"="+cname+";path=/;expires="	 + curDate.toLocaleString();
      window.document.cookie = "password"+"="+cpwd+";path=/;expires="	 + curDate.toLocaleString();
    },
    //獲取cookie
    getCookie() {
        if(document.cookie.length > 0) {
        var arr = document.cookie.split("; ");
        for(var i=0;i<arr.length;i++) {
          var arr2 = arr[i].split("=");
          if(arr2[0] == "username") {
            this.$set(this.loginForm,'username',arr2[1])
          } else if(arr2[0] == "password") {
            this.$set(this.loginForm,'password',arr2[1])
            this.loginForm.password = arr2[1];
          }
        }
      }
    },
    //清除cookie
    clearCookie() {
      this.setCookie("","",-1);
    }
  }