<el-form
       ref="form"
       :model="form"
       label-width="80px"
       label-position="top"
       @submit.native.prevent
      >
       <el-form-item label="用戶名/賬號(hào)">
        <div class="userError">
         <el-input
          size="mini"
          v-model.trim="form.userName"
          clearable
         ></el-input>
        </div>
       </el-form-item>
       <el-form-item label="密碼">
        <div class="pwdError">
         <el-input
          size="mini"
          v-model.trim="form.loginPwd"
          clearable
          show-password
         ></el-input>
        </div>
       </el-form-item>
       <el-checkbox label="記住賬號(hào)" v-model="isRemember"></el-checkbox>
       <el-button native-type="submit" size="mini" @click="loginPage"
        >登錄</el-button
       >
      </el-form>

export default {
 name: "login",
 data() {
  return {
   form: {
    userName: '',
    loginPwd: '',
   },
   isRemember: false,
  };
 },
 mounted() {
  // 第1步，在頁(yè)面加載的時(shí)候，首先去查看一下cookie中有沒(méi)有用戶名和密碼可以用
  this.getCookie();
 },
 methods: {
  /* 第3步，當(dāng)用戶執(zhí)行登錄操作的時(shí)候，先看看用戶名密碼對(duì)不對(duì)
       若不對(duì)，就提示登錄錯(cuò)誤
       若對(duì)，就再看一下用戶有沒(méi)有勾選記住密碼
          若沒(méi)勾選，就及時(shí)清空cookie，回到最初始狀態(tài)
          若勾選了，就把用戶名和密碼存到cookie中并設(shè)置7天有效期，以供使用
           （當(dāng)然也有可能是更新之前的cookie時(shí)間）
  */
  async loginPage() {
   // 發(fā)請(qǐng)求看看用戶輸入的用戶名和密碼是否正確
   const res = await this.$api.loginByUserName(this.form)
   if(res.isSuccess == false){
    this.$message.error("登錄錯(cuò)誤")
   }
   else{
    const self = this;
    // 第4步，若復(fù)選框被勾選了，就調(diào)用設(shè)置cookie方法，把當(dāng)前的用戶名和密碼和過(guò)期時(shí)間存到cookie中
    if (self.isRemember === true) {
     // 傳入賬號(hào)名，密碼，和保存天數(shù)（過(guò)期時(shí)間）3個(gè)參數(shù)
     // 1/24/60 測(cè)試可用一分鐘測(cè)試，這樣看著會(huì)比較明顯
     self.setCookie(this.form.userName, this.form.loginPwd, 1/24/60);
     // self.setCookie(this.form.userName, this.form.loginPwd, 7); // 這樣就是7天過(guò)期時(shí)間
    } 
    // 若沒(méi)被勾選就及時(shí)清空Cookie，因?yàn)檫@個(gè)cookie有可能是上一次的未過(guò)期的cookie，所以要及時(shí)清除掉
    else {
     self.clearCookie();
    }
    // 當(dāng)然，無(wú)論用戶是否勾選了cookie，路由該跳轉(zhuǎn)還是要跳轉(zhuǎn)的
    this.$router.push({
     name: "project",
    });
   }
  },
  // 設(shè)置cookie
  setCookie(username, password, exdays) {
   var exdate = new Date(); // 獲取當(dāng)前登錄的時(shí)間
   exdate.setTime(exdate.getTime() + 24 * 60 * 60 * 1000 * exdays); // 將當(dāng)前登錄的時(shí)間加上七天，就是cookie過(guò)期的時(shí)間，也就是保存的天數(shù)
   // 字符串拼接cookie,因?yàn)閏ookie存儲(chǔ)的形式是name=value的形式
   window.document.cookie = "userName" + "=" + username + ";path=/;expires=" + exdate.toGMTString();
   window.document.cookie = "userPwd" + "=" + password + ";path=/;expires=" + exdate.toGMTString();
   window.document.cookie = "isRemember" + "=" + this.isRemember + ";path=/;expires=" + exdate.toGMTString();
  },
  // 第2步，若cookie中有用戶名和密碼的話，就通過(guò)兩次切割取出來(lái)存到form表單中以供使用，若是沒(méi)有就沒(méi)有
  getCookie: function () {
   if (document.cookie.length > 0) {
    var arr = document.cookie.split("; "); //因?yàn)槭菙?shù)組所以要切割。打印看一下就知道了
    // console.log(arr,"切割");
    for (var i = 0; i < arr.length; i++) {
     var arr2 = arr[i].split("="); // 再次切割
     // console.log(arr2,"切割2");
     // // 判斷查找相對(duì)應(yīng)的值
     if (arr2[0] === "userName") {
      this.form.userName = arr2[1]; // 轉(zhuǎn)存一份保存用戶名和密碼
     } else if (arr2[0] === "userPwd") {
      this.form.loginPwd = arr2[1];//可解密
     } else if (arr2[0] === "isRemember") {
      this.isRemember = Boolean(arr2[1]);
     }
    }
   }
  },
  // 清除cookie
  clearCookie: fu![image](/img/bVcOHhz)
   this.setCookie("", "", -1); // 清空并設(shè)置天數(shù)為負(fù)1天
  },
 },
};