探索加密解密的世界
嗨，我是勾勾。
記得看我的年度打工總結(jié)：技術(shù)人年度總結(jié) | 2020，注定不平凡
今天的話題很簡(jiǎn)單也很常見，就是?JS 領(lǐng)域下的常用加密解密流程。
加密
我們從用戶注冊(cè)開始。
一個(gè)新用戶在表單下要注冊(cè)一個(gè)新賬號(hào)，當(dāng)他在寫入用戶名時(shí)先判斷該用戶名是否存在。
存在，要么更換一個(gè)用戶名，要么提醒他去注冊(cè)。
不存在，那就直接開始注冊(cè)。
在注冊(cè)的過程就要使用加密了。我們需要對(duì)用戶提交的密碼加密，然后把加密后的結(jié)果存入數(shù)據(jù)庫(kù)。
這里推薦一個(gè)模塊叫 bcrypt 。想去撩它 API 的小伙伴可以點(diǎn)這里：
https://github.com/kelektiv/node.bcrypt.js
我們安裝完之后 npm install bcrypt 之后引入到文件中 import bcrypt from “bcrypt”。
在這個(gè) API 中我們提出兩個(gè) api 聊下。
bcrypt.hashSync(data，salt)
第一個(gè)參數(shù)是加密的數(shù)據(jù)，一般是 password
第二個(gè)數(shù)據(jù)是加密強(qiáng)大，不宜太大也不宜太小，按照官方設(shè)置為 10
案例
const pw = bcrypt({"password":"gougou123"},10)打印 pw 就會(huì)看你到一串完全看不懂的密碼。
下一次我們?cè)诒葘?duì)這個(gè)密碼的時(shí)候，bcrypt 也提供了 api 接口 compareSync。
bcrypt.compareSync(data,pw)
第一個(gè)參數(shù)是被比對(duì)的數(shù)據(jù)
第二個(gè)參數(shù)是加密后的數(shù)據(jù)
案例
const isSuccess = bcrypt.compareSync({“password”:"gougou123"},pw)比對(duì)成功返回 true，不成功就是 false。
Token 怎么使用
如果我們登錄密碼比對(duì)成功，往往后臺(tái)都要給我們一個(gè) access_token。這東西就是用戶在整個(gè)平臺(tái)的身份，并且之后的操作都是要攜帶 token 進(jìn)行的。一旦 token 過期或不對(duì)，平臺(tái)出于對(duì)用戶的保護(hù)都會(huì)直接提示讓你重新登錄。
我在 node 下使用一個(gè)叫 jsonwebtoken 的模塊，它里面就給開發(fā)者提供了 token 的生成方法和驗(yàn)證方法。
const jwt = require("jsonwebtoken")生成方法
const token = jwt.assign({"id":"123"},privatekey)注意：第一個(gè)參數(shù)一般都是使用用戶唯一標(biāo)識(shí)符 id phone 等，第二個(gè)參數(shù)是本地密鑰或私有密鑰，這個(gè)東西要本地保存。
Token 解析
const data = jwt.verify(token,privatekey)注意，返回的結(jié)果就是 {”id“，”123“} 被轉(zhuǎn)化成 token 的數(shù)據(jù)，第二個(gè)參數(shù)也是要必傳的。
攜帶 token 的操作
上面是在 node 的思想中去簽名 token 和解析 token?！皳碛辛?token 該怎么攜帶”也是一個(gè)有趣的話題。
我們都知道用戶的操作無(wú)非就是觸發(fā)了我們?cè)谶@一塊寫入的接口，只要把 token 寫在接口中就會(huì)在發(fā)送請(qǐng)求的時(shí)候攜帶 token。
在 http 請(qǐng)求中有個(gè) Authorization 的屬性，翻譯過來(lái)就是用戶認(rèn)證的意思。
所以發(fā)送者就可以使用?req.header.Authorization = "Token "+token，這里面的格式必須要這樣寫。
一個(gè)字符串加空格加 token 值的形式。下圖是 postman 顯示的格式：
后臺(tái)拿到這個(gè) token 之后就可以解析 token 看它是否正確，是否過期。如果匹配成功，那就說(shuō)明這個(gè)用戶享有這個(gè)權(quán)限，就可以執(zhí)行該操作。
很多人總以為登錄注冊(cè)非常簡(jiǎn)單，其實(shí)困難程度要遠(yuǎn)遠(yuǎn)比其他功能高很多。今天了解了這個(gè)過程后，不如行動(dòng)起來(lái)，嘗試一番，有什么問題歡迎及時(shí)交流(????)?。
推薦閱讀：
前端人因?yàn)?Vue3 的 Ref-sugar 提案打起來(lái)了！
點(diǎn)點(diǎn)“贊”和“在看”，保護(hù)頭發(fā)，減少bug。