Vue實現(xiàn)登錄記住賬號密碼功能的思路與過程

更新時間：2021年11月30日 12:38:21 作者：CC葡葡萄

最近在學習vue,發(fā)現(xiàn)了vue的好多坑,下面這篇文章主要給大家介紹了關于Vue實現(xiàn)登錄記住賬號密碼功能的思路與過程,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下

實現(xiàn)思路

用戶登錄時若勾選“記住我”功能選項，則將登錄名和密碼（加密后）保存至本地緩存中，下次登錄頁面加載時自動獲取保存好的賬號和密碼（需解密），回顯到登錄輸入框中。

這里有三種方法來存儲賬號密碼：

1. sessionStorage(不推薦)

1). 僅在當前會話下有效，關閉瀏覽器窗口后就被清除了

2). 存放數(shù)據(jù)大小一般為5MB

3). 不與服務器進行交互通信

2. localStorage

1). 除非主動清除localStorage里的信息，否則將永遠存在，關閉瀏覽器窗口后下次啟動任然存在

2). 存放數(shù)據(jù)大小一般為5MB

3). 不與服務器進行交互通信

3. cookies

1). 可以手動設置過期時間，超過有效期則失效。未設置過期時間，關閉瀏覽器窗口后就被清除了

2). 存放數(shù)據(jù)大小一般為4K

3). 每次請求都會被傳送到服務器

這里主要介紹第二種和第三種的使用方法。

功能界面

<el-form :model="loginForm" :rules="rules" ref="loginForm" label-width="100px" class="loginForm demo-ruleForm">
  <!-- 賬號 -->
  <el-form-item label="賬號" prop="userId" autocomplete="on">
    <el-input v-model="loginForm.userId" placeholder="請輸入賬號"></el-input>
  </el-form-item>
  <!-- 密碼 -->
  <el-form-item label="密碼" prop="password">
    <el-input type="password" v-model="loginForm.password" placeholder="請輸入密碼" @keyup.enter="submitForm('loginForm')"></el-input>
  </el-form-item>
  <div class="tip">
    <!-- 記住我 -->
    <el-checkbox v-model="checked" class="rememberMe">記住我</el-checkbox>
    <!-- 找回密碼 -->
    <el-button type="text" @click="open()" class="forgetPw">忘記密碼？</el-button>
  </div>
  <!-- 登錄 -->
  <el-form-item>
    <el-button type="primary" @click="submitForm('loginForm')" class="submit-btn">登錄</el-button>
  </el-form-item>
</el-form>

記住賬號密碼功能的具體實現(xiàn)

密碼加密

為提高安全性，密碼存儲前需進行加密處理。目前加密方式有很多種，我這里選用了base64。

npm安裝base64依賴

//安裝
npm install --save js-base64
//引入
const Base64 = require("js-base64").Base64

localStorage

export default {
  data() {
    return {
      loginForm: {
        userId: "",
        password: "",
      },
      checked: false,
    };
  },
  mounted() {
    let username = localStorage.getItem("userId");
    if (username) {
      this.loginForm.userId = localStorage.getItem("userId");
      this.loginForm.password = Base64.decode(localStorage.getItem("password"));// base64解密
      this.checked = true;
    }
  },
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          /* ------ 賬號密碼的存儲 ------ */
          if (this.checked) {
            let password = Base64.encode(this.loginForm.password); // base64加密
            localStorage.setItem("userId", this.loginForm.userId);
            localStorage.setItem("password", password);
          } else {
            localStorage.removeItem("userId");
            localStorage.removeItem("password");
          }
          /* ------ http登錄請求 ------ */
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
  },
};

cookies

export default {
  data() {
    return {
      loginForm: {
        userId: "",
        password: "",
      },
      checked: false,
    };
  },
  mounted() {
    this.getCookie();
  },
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          /* ------ 賬號密碼的存儲 ------ */
          if (this.checked) {
            let password = Base64.encode(this.loginForm.password); // base64加密
            this.setCookie(this.loginForm.userId, password, 7);
          } else {
            this.setCookie("", "", -1); // 修改2值都為空，天數(shù)為負1天就好了
          }
          /* ------ http登錄請求 ------ */
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    
    // 設置cookie
    setCookie(userId, password, days) {
      let date = new Date(); // 獲取時間
      date.setTime(date.getTime() + 24 * 60 * 60 * 1000 * days); // 保存的天數(shù)
      // 字符串拼接cookie
      window.document.cookie =
        "userId" + "=" + userId + ";path=/;expires=" + date.toGMTString();
      window.document.cookie =
        "password" + "=" + password + ";path=/;expires=" + date.toGMTString();
    },
    
    // 讀取cookie 將用戶名和密碼回顯到input框中
    getCookie() {
      if (document.cookie.length > 0) {
        let arr = document.cookie.split("; "); //分割成一個個獨立的“key=value”的形式
        for (let i = 0; i < arr.length; i++) {
          let arr2 = arr[i].split("="); // 再次切割，arr2[0]為key值，arr2[1]為對應的value
          if (arr2[0] === "userId") {
            this.loginForm.userId = arr2[1];
          } else if (arr2[0] === "password") {
            this.loginForm.password = Base64.decode(arr2[1]);// base64解密
            this.checked = true;
          }
        }
      }
    },
  },
};