在 JavaScript 中管理 Token 的最佳實踐記錄

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

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

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

在 JavaScript 中管理 Token 的最佳實踐

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

一、Token 的作用

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

用戶認證：Token 可以用于驗證用戶身份，例如登錄時通過用戶名和密碼獲得一個 Token，然后在后續(xù)請求中使用這個 Token 來標識用戶身份。
會話管理：Token 使得應用能夠維持用戶的會話狀態(tài)，例如在一段時間內保持用戶處于登錄狀態(tài)。
權限控制：通過在 Token 中嵌入用戶的權限信息，應用可以輕松判斷用戶是否有權訪問某些資源。

二、Token 的存儲方式

在 Web 應用中，Token 可以存儲在不同的位置：

Cookies：這是最常見的存儲方式，尤其在跨域請求中可以設置 HttpOnly、Secure 等選項來提高安全性。
Local Storage 或 Session Storage：這些瀏覽器存儲空間適用于單頁面應用，Token 在客戶端應用中存儲方便靈活，但相對于 Cookies 的安全性較弱。

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

以下代碼展示了如何在 JavaScript 中管理 Token，包括獲取、設置和刪除操作。我們使用了一個 api 對象來模擬實際應用中的 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"
    });
}

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

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

1. api 對象的初始化

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

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

2. TokenKey 和 originReg 正則表達式

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

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

3. domain$1 變量

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

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

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

1. 獲取 Token (getToken)

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

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

2. 設置 Token (setToken)

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

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

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

3. 刪除 Token (removeToken

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

removeToken 函數(shù)用于從存儲中刪除指定鍵名的 Token。
默認會刪除 TokenKey 對應的 Token，并設置刪除操作的作用域為 .qizhidao.com，保證 Token 在所有子域名中被刪除。

六、Token 管理的安全性考慮

使用 HttpOnly 和 Secure：在實際應用中，可以通過設置 HttpOnly 和 Secure 標志提高 Cookies 的安全性。HttpOnly 阻止 JavaScript 訪問 Cookies，Secure 使得 Cookies 只能在 HTTPS 連接中傳輸。
Token 加密：在存儲之前對 Token 進行加密，以防止 Token 在客戶端被盜用。
設置過期時間：Token 設置合理的過期時間，并定期刷新，確保用戶會話的安全性。
跨站請求偽造（CSRF）防護：使用帶有唯一令牌的 POST 請求或驗證請求來源，減少 CSRF 攻擊風險。
保護 Local Storage 和 Session Storage：如果在 Local Storage 或 Session Storage 中存儲 Token，確保在讀取時執(zhí)行安全檢查，避免 XSS 攻擊竊取 Token。

七、實際應用場景與最佳實踐

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