密碼是用戶最重要的數(shù)據(jù)，也是系統(tǒng)最需要保護的數(shù)據(jù)，我們在登錄的時候需要用賬號密碼請求登錄接口，如果用戶勾選記住密碼，那么下一次登錄時，我們需要將賬號密碼回填到輸入框，用戶可以直接登錄系統(tǒng)。我們分別對這種流程進行說明：

記住密碼

在請求登錄接口成功后，我們需要判斷用戶是否勾選記住密碼，如果是，則將記住密碼狀態(tài)、賬號信息存入本地。
下次登錄時，獲取本地的記住密碼狀態(tài)，如果為true則獲取本地存儲的賬號信息，將信息回填登錄表單。

密碼加密

我在這里例舉兩種加密方式MD5、Base64
MD5：
1、不可逆
2、任意長度的明文字符串，加密后得到的固定長度的加密字符串
3、實質(zhì)是一種散列表的計算方式

Base64：
1、可逆性
2、可以將圖片等二進制文件轉換為文本文件
3、可以把非ASCII字符的數(shù)據(jù)轉換成ASCII字符，避免不可見字符
4、實質(zhì)是 一種編碼格式，如同UTF-8

我們這里使用Base64來為密碼做加密處理。

npm install --save js-base64

引入Base64

// js中任意位置都可引入
let Base64 = require('js-base64').Base64;

可以通過encode和decode對字符串進行加密和解密

let Base64 = require('js-base64').Base64;

let pwd = Base64.encode('a123456'); 
console.log(pwd);  // YTEyMzQ1Ng==

let pws2 = Base64.decode('YTEyMzQ1Ng==');
console.log(pwd2);  // a123456

到這里我們對密碼的簡單加密和解密就完成了。
需要注意的是，Base64是可以解密的，所以單純使用Base64進行加密是不安全的，所以我們要對Base64進行二次加密操作，生成一個隨機字符串 + Base64的加密字符。

/***
 * @param {number} num 需要生成多少位隨機字符
 * @return {string} 生成的隨機字符 
 */
const randomString = (num) => {
  let str = "",
    arr = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', 'a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l', 'm', 'n', 'o', 'p', 'q', 'r', 's', 't', 'u', 'v', 'w', 'x', 'y', 'z', 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z'];
  let index = null;
  for (let i = 0; i < num; i++) {
    index = Math.round(Math.random() * (arr.length - 1));
    str += arr[index];
  }
  return str;
}

調(diào)用randomString函數(shù)，根據(jù)你傳入的數(shù)字來生成指定長度的隨機字符串，然后將隨機字符串與Base64生成的隨機字符憑借，完成對密碼的二次加密。

let pwd = randomWord(11) + Base64.encode(password); // J8ndUzNIPTtYTEyMzQ1Ng==

到這里就完成了密碼加密操作。
在用戶登錄時，將賬號密碼存入本地，存入本地方式有很多，例如：Cookies、localStorage、sessionStorage等，關于使用方法網(wǎng)上有很多，這里我們使用微信小程序的存儲方式wx.setStorageSyn。

// 我們這里使用微信小程序的存儲方式wx.setStorageSync
let account = {
   username: 'test‘,
   password: pwd
 }
wx.setStorageSync('account', account)

二次登錄

用戶勾選記住密碼后，第二次進入系統(tǒng)，直接從本地獲取賬號密碼，對密碼進行解密后回填到表單。
先判斷用戶是否勾選記住密碼，然后對密碼進行解密。

init() {
   let state = wx.getStorageSync('rememberMe')
   if (state) {
      let account = wx.getStorageSync('account')
      let Base64 = require('js-base64').Base64;
      let pwd = Base64.decode(account.password.slice(11))
      this.setData({
        username: account.username,
        password: pwd
      })
    }
   this.setData({ rememberMe: state })
 }

將解密后的數(shù)據(jù)回顯到表單上，用戶就可以直接登錄了。

最后

關于記住密碼業(yè)務，需要保證用戶的密碼是加密存儲，這里用的是微信小程序示例，在web上的流程也是如此，你可以在vue項目中使用本文提到的方法。

---

如果你覺得本文章不錯，歡迎點贊??、收藏??、轉發(fā)?哦~
閱讀其它：
Git提交規(guī)范
微信小程序動態(tài)生成表單來啦！你再也不需要手寫表單了！
微信小程序用戶隱私API
所見即所得的動畫效果：Animate.css
van-dialog彈窗異步關閉-校驗表單

總結

以上是生活随笔為你收集整理的微信小程序记住密码，让登录解放双手的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。