快捷導(dǎo)航

在 JavaScript 中管理 Token 的最佳實(shí)踐記錄

更新時(shí)間：2024年11月09日 10:37:21 作者：碼農(nóng)阿豪@新空間代碼工作室

文章介紹了在JavaScript中管理Token的最佳實(shí)踐,包括Token的作用、存儲(chǔ)方式、代碼實(shí)現(xiàn)和安全性考慮,通過(guò)示例代碼,展示了如何在不同環(huán)境中動(dòng)態(tài)設(shè)置Token作用域,并提供了安全存儲(chǔ)和保護(hù)Token的方法

在 JavaScript 中管理 Token 的最佳實(shí)踐
一、Token 的作用
二、Token 的存儲(chǔ)方式
三、JavaScript 中管理 Token 的代碼實(shí)現(xiàn)
四、深入理解代碼實(shí)現(xiàn)
五、核心函數(shù)解析
六、Token 管理的安全性考慮
七、實(shí)際應(yīng)用場(chǎng)景與最佳實(shí)踐
八、總結(jié)

在 JavaScript 中管理 Token 的最佳實(shí)踐

在 Web 應(yīng)用程序中，安全有效地管理 Token 是一個(gè)核心問(wèn)題。Token 通常用于用戶(hù)認(rèn)證、會(huì)話管理以及權(quán)限控制。通過(guò)合理的設(shè)計(jì)，Token 管理不僅可以確保用戶(hù)數(shù)據(jù)安全，還可以提高應(yīng)用程序的穩(wěn)定性和可維護(hù)性。本文將圍繞如何在 JavaScript 中有效地獲取、設(shè)置和刪除 Token 展開(kāi)，結(jié)合實(shí)際代碼案例來(lái)說(shuō)明最佳實(shí)踐。

一、Token 的作用

Token 通常是一個(gè)字符串，它可以在服務(wù)器端和客戶(hù)端之間傳遞用戶(hù)的身份信息。Token 的主要作用如下：

用戶(hù)認(rèn)證：Token 可以用于驗(yàn)證用戶(hù)身份，例如登錄時(shí)通過(guò)用戶(hù)名和密碼獲得一個(gè) Token，然后在后續(xù)請(qǐng)求中使用這個(gè) Token 來(lái)標(biāo)識(shí)用戶(hù)身份。
會(huì)話管理：Token 使得應(yīng)用能夠維持用戶(hù)的會(huì)話狀態(tài)，例如在一段時(shí)間內(nèi)保持用戶(hù)處于登錄狀態(tài)。
權(quán)限控制：通過(guò)在 Token 中嵌入用戶(hù)的權(quán)限信息，應(yīng)用可以輕松判斷用戶(hù)是否有權(quán)訪問(wèn)某些資源。

二、Token 的存儲(chǔ)方式

在 Web 應(yīng)用中，Token 可以存儲(chǔ)在不同的位置：

Cookies：這是最常見(jiàn)的存儲(chǔ)方式，尤其在跨域請(qǐng)求中可以設(shè)置 HttpOnly、Secure 等選項(xiàng)來(lái)提高安全性。
Local Storage 或 Session Storage：這些瀏覽器存儲(chǔ)空間適用于單頁(yè)面應(yīng)用，Token 在客戶(hù)端應(yīng)用中存儲(chǔ)方便靈活，但相對(duì)于 Cookies 的安全性較弱。

三、JavaScript 中管理 Token 的代碼實(shí)現(xiàn)

以下代碼展示了如何在 JavaScript 中管理 Token，包括獲取、設(shè)置和刪除操作。我們使用了一個(gè) api 對(duì)象來(lái)模擬實(shí)際應(yīng)用中的 Token 管理接口。

var api = init(defaultConverter, { path: "/" });
const TokenKey = "token"
  , originReg = /^kzone(?:-(dev|test|nts|uat|pre))?\.qizhidao.com$/
  , domain$1 = originReg.test(location.origin) ? ".qizhidao.com" : "";
function getToken(e) {
    return api.get(e || TokenKey);
}
function setToken(e, t, o={}) {
    return api.set(e, t, {
        Domain: domain$1,
        ...o
    });
}
function removeToken(e) {
    return api.remove(e || TokenKey, {
        domain: ".qizhidao.com"
    });
}

四、深入理解代碼實(shí)現(xiàn)

這段代碼中包含三個(gè)核心函數(shù)：getToken、setToken 和 removeToken，分別用于獲取、設(shè)置和刪除 Token。讓我們逐個(gè)分析這些函數(shù)的設(shè)計(jì)思路及實(shí)現(xiàn)細(xì)節(jié)。

1. api 對(duì)象的初始化

var api = init(defaultConverter, { path: "/" });

在這段代碼中，我們使用 init 函數(shù)創(chuàng)建了一個(gè) api 對(duì)象。該對(duì)象是一個(gè)自定義的接口，用于管理 Token 的存儲(chǔ)、獲取和刪除。defaultConverter 可能是一個(gè)數(shù)據(jù)轉(zhuǎn)換函數(shù)，用于將 Token 轉(zhuǎn)換為合適的格式。

2. TokenKey 和 originReg 正則表達(dá)式

const TokenKey = "token";
const originReg = /^kzone(?:-(dev|test|nts|uat|pre))?\.qizhidao.com$/;

TokenKey：這是一個(gè)常量，表示默認(rèn)的 Token 鍵名。通常我們會(huì)使用 TokenKey 來(lái)獲取和設(shè)置 Token，確保應(yīng)用中 Token 的統(tǒng)一管理。
originReg：一個(gè)正則表達(dá)式，用于檢測(cè)當(dāng)前域名是否匹配特定格式。正則中的模式表示應(yīng)用環(huán)境可能是 kzone 或帶有環(huán)境后綴（如 -dev、-test 等）的域名。

3. domain$1 變量

const domain$1 = originReg.test(location.origin) ? ".qizhidao.com" : "";

domain$1 用于根據(jù)當(dāng)前環(huán)境動(dòng)態(tài)設(shè)置 Token 的作用域。
如果當(dāng)前域名符合 originReg 的匹配規(guī)則，則 domain$1 被設(shè)置為 ".qizhidao.com"，否則為空。這確保了在多環(huán)境下 Token 的有效性，避免因域名不同而導(dǎo)致的 Token 無(wú)法跨域共享的問(wèn)題。

五、核心函數(shù)解析

1. 獲取 Token (getToken)

function getToken(e) {
    return api.get(e || TokenKey);
}

getToken 函數(shù)用于從存儲(chǔ)中獲取 Token。
該函數(shù)接受一個(gè)可選參數(shù) e，如果未傳入該參數(shù)，則使用 TokenKey 作為默認(rèn)鍵名。
api.get 方法根據(jù)鍵名從指定的存儲(chǔ)中獲取 Token 值。

2. 設(shè)置 Token (setToken)

function setToken(e, t, o={}) {
    return api.set(e, t, {
        Domain: domain$1,
        ...o
    });
}

setToken 函數(shù)用于在存儲(chǔ)中設(shè)置 Token。
參數(shù)：
- e：鍵名，通常為 TokenKey。
- t：要存儲(chǔ)的 Token 值。
- o：額外的配置參數(shù)?？梢詡魅胗行诘仍O(shè)置項(xiàng)。

api.set 方法會(huì)將 Token 存儲(chǔ)在指定的作用域（domain$1），這樣確保 Token 在多環(huán)境中統(tǒng)一作用。

3. 刪除 Token (removeToken

function removeToken(e) {
    return api.remove(e || TokenKey, {
        domain: ".qizhidao.com"
    });
}

removeToken 函數(shù)用于從存儲(chǔ)中刪除指定鍵名的 Token。
默認(rèn)會(huì)刪除 TokenKey 對(duì)應(yīng)的 Token，并設(shè)置刪除操作的作用域?yàn)?.qizhidao.com，保證 Token 在所有子域名中被刪除。

六、Token 管理的安全性考慮

使用 HttpOnly 和 Secure：在實(shí)際應(yīng)用中，可以通過(guò)設(shè)置 HttpOnly 和 Secure 標(biāo)志提高 Cookies 的安全性。HttpOnly 阻止 JavaScript 訪問(wèn) Cookies，Secure 使得 Cookies 只能在 HTTPS 連接中傳輸。
Token 加密：在存儲(chǔ)之前對(duì) Token 進(jìn)行加密，以防止 Token 在客戶(hù)端被盜用。
設(shè)置過(guò)期時(shí)間：Token 設(shè)置合理的過(guò)期時(shí)間，并定期刷新，確保用戶(hù)會(huì)話的安全性。
跨站請(qǐng)求偽造（CSRF）防護(hù)：使用帶有唯一令牌的 POST 請(qǐng)求或驗(yàn)證請(qǐng)求來(lái)源，減少 CSRF 攻擊風(fēng)險(xiǎn)。
保護(hù) Local Storage 和 Session Storage：如果在 Local Storage 或 Session Storage 中存儲(chǔ) Token，確保在讀取時(shí)執(zhí)行安全檢查，避免 XSS 攻擊竊取 Token。

七、實(shí)際應(yīng)用場(chǎng)景與最佳實(shí)踐

登錄驗(yàn)證：在用戶(hù)登錄后，將返回的 Token 使用 setToken 存儲(chǔ)，并在每次 API 請(qǐng)求時(shí)使用 getToken 取出 Token 附加在請(qǐng)求頭中，以便服務(wù)器驗(yàn)證。
會(huì)話管理：設(shè)置 Token 過(guò)期時(shí)間并定期刷新 Token 以維持會(huì)話。如果檢測(cè)到 Token 過(guò)期，可以自動(dòng)調(diào)用 removeToken 清除舊 Token 并跳轉(zhuǎn)到登錄頁(yè)面。
多環(huán)境支持：通過(guò) originReg 的正則匹配，實(shí)現(xiàn)了在不同域名下動(dòng)態(tài)設(shè)置 Token 的作用域。可以在開(kāi)發(fā)、測(cè)試、生產(chǎn)環(huán)境中共享 Token 而無(wú)需手動(dòng)調(diào)整。