前言

本文梳理 所有前端框架通用 的 Token 操作邏輯，剝離具體項(xiàng)目/技術(shù)棧細(xì)節(jié)，聚焦「獲取→存儲(chǔ)→使用→過期→清除」的核心生命周期，每個(gè)步驟均標(biāo)注「通用場(chǎng)景+通用方案+注意事項(xiàng)」，適合所有前端開發(fā)場(chǎng)景，可直接作為開發(fā)速查表。

前置說明：Token 的核心定位

Token 是后端簽發(fā)的臨時(shí)訪問憑證，核心作用是：

1. 證明“當(dāng)前用戶是誰”（身份認(rèn)證）；
2. 證明“當(dāng)前用戶有權(quán)限訪問”（權(quán)限校驗(yàn)）。

一、第一步：登錄成功獲取 Token

通用場(chǎng)景

用戶通過賬號(hào)密碼/驗(yàn)證碼/第三方登錄等方式，向后端發(fā)起登錄請(qǐng)求，后端驗(yàn)證通過后，在響應(yīng)體中返回 Token。

通用方案

1. 解析登錄接口的響應(yīng)數(shù)據(jù)；
2. 根據(jù)后端接口文檔，從響應(yīng)體中提取 Token 字段（常見字段名：token、access_token、data.token）；
3. 獲取到 Token 后，立即執(zhí)行「存儲(chǔ)」操作。

注意事項(xiàng)

1. 必須以后端接口文檔為準(zhǔn)，不要硬猜字段名；
2. 獲取到 Token 后，不要只打印在控制臺(tái)，必須立即存儲(chǔ)；
3. 若接口同時(shí)返回 refresh_token（刷新 Token），需一并存儲(chǔ)。

二、第二步：存儲(chǔ) Token（核心是選對(duì)存儲(chǔ)方式）

通用場(chǎng)景

將獲取到的 Token 保存到前端，確保刷新頁面后不丟失，且全局頁面/組件都能讀取。

通用方案（三種常見存儲(chǔ)方式對(duì)比）

注意事項(xiàng)

1. 推薦優(yōu)先選 localStorage：是目前最通用、最方便的存儲(chǔ)方式；
2. 不要同時(shí)用多種方式存儲(chǔ)（如同時(shí)存 localStorage 和 Cookie），易導(dǎo)致數(shù)據(jù)不一致；
3. 不要在 Token 中存儲(chǔ)敏感信息（如密碼、身份證號(hào)）：Token 僅作為憑證，不承載業(yè)務(wù)數(shù)據(jù)。

三、第三步：請(qǐng)求接口時(shí)自動(dòng)攜帶 Token

通用場(chǎng)景

每次向后端發(fā)起業(yè)務(wù)請(qǐng)求（如獲取列表、提交數(shù)據(jù)）時(shí)，都需在請(qǐng)求頭（Header） 中帶上 Token，供后端驗(yàn)證身份。

通用方案

使用主流 HTTP 請(qǐng)求庫的「請(qǐng)求攔截器」（如 Axios、Fetch 封裝、umi-request），在請(qǐng)求發(fā)送前自動(dòng)讀取 Token 并添加到請(qǐng)求頭，無需每次手動(dòng)添加。

通用請(qǐng)求頭格式（兩種最常見）

1. 標(biāo)準(zhǔn) Authorization 頭（推薦）：

   Authorization: Bearer <你的token值>

2. 自定義 token 頭：

   token: <你的token值>

注意事項(xiàng)

1. 必須以后端接口文檔為準(zhǔn)，不要寫錯(cuò)請(qǐng)求頭字段名；
2. 只有 Token 存在時(shí)才添加請(qǐng)求頭，避免空 Token 導(dǎo)致接口報(bào)錯(cuò)；
3. 不要在請(qǐng)求體（Body）中傳遞 Token（除非后端強(qiáng)制要求），請(qǐng)求頭是標(biāo)準(zhǔn)做法。

四、第四步：處理 Token 過期

通用場(chǎng)景

Token 有有效期（常見為 2 小時(shí)/24 小時(shí)/7 天），過期后后端會(huì)拒絕請(qǐng)求并返回特定狀態(tài)碼（通常為 401 Unauthorized）。

通用方案

使用主流 HTTP 請(qǐng)求庫的「響應(yīng)攔截器」，統(tǒng)一處理 Token 過期邏輯：

1. 判斷響應(yīng)狀態(tài)碼是否為 401（或后端約定的其他過期標(biāo)識(shí)）；
2. 若確認(rèn)過期：
   • 給用戶友好提示（如“登錄已過期，請(qǐng)重新登錄”）；
   • 清除所有存儲(chǔ)的 Token（及用戶信息）；
   • 強(qiáng)制跳轉(zhuǎn)到登錄頁。

注意事項(xiàng)

1. 不要忽略 401 錯(cuò)誤：Token 過期后用戶無法繼續(xù)操作，必須重新登錄；
2. 清除 Token 時(shí)要徹底：刪除所有存儲(chǔ)介質(zhì)中的 Token（如同時(shí)刪 localStorage 和全局狀態(tài)）；
3. 跳轉(zhuǎn)登錄頁時(shí)建議替換當(dāng)前歷史記錄（避免用戶點(diǎn)擊“回退”回到過期頁面）。

五、第五步：用戶主動(dòng)登出清除 Token

通用場(chǎng)景

用戶點(diǎn)擊“退出登錄”按鈕時(shí)，需清除所有登錄相關(guān)數(shù)據(jù)，恢復(fù)到未登錄狀態(tài)。

通用方案

1. 觸發(fā)登出操作時(shí)，先給用戶二次確認(rèn)（如“確定要退出登錄嗎？”）；
2. 確認(rèn)后執(zhí)行清除操作：
   • 清除所有存儲(chǔ)介質(zhì)中的 Token（localStorage/sessionStorage/Cookie）；
   • 清除全局狀態(tài)中的用戶信息（如頭像、昵稱）；
3. 強(qiáng)制跳轉(zhuǎn)到登錄頁。

注意事項(xiàng)

1. 不要省略二次確認(rèn)：避免用戶誤觸登出按鈕；
2. 登出后不要保留任何登錄痕跡：確保下次打開應(yīng)用是完全的未登錄狀態(tài)；
3. 若后端有“登出接口”，建議先調(diào)用接口（通知后端銷毀 Token），再執(zhí)行前端清除操作。

六、第六步：路由/頁面權(quán)限控制（進(jìn)階但常用）

通用場(chǎng)景

未登錄的用戶不能訪問需要登錄的頁面（如首頁、個(gè)人中心），已登錄的用戶不能訪問登錄頁。

通用方案

使用路由守衛(wèi)/權(quán)限攔截（如 Vue Router 的 beforeEach、React Router 的路由攔截），在頁面跳轉(zhuǎn)前統(tǒng)一校驗(yàn)：

1. 定義「白名單」：不需要登錄就能訪問的頁面（如登錄頁、注冊(cè)頁、404 頁）；
2. 跳轉(zhuǎn)前讀取 Token，判斷用戶是否登錄；
3. 根據(jù)判斷結(jié)果決定“放行”還是“跳轉(zhuǎn)登錄頁”。

注意事項(xiàng)

1. 不要忘記定義白名單：登錄頁本身不需要登錄，否則會(huì)導(dǎo)致“無限重定向”；
2. 權(quán)限控制僅做“前端攔截”：真正的權(quán)限校驗(yàn)必須在后端做（前端攔截防君子不防小人）；
3. 不要在權(quán)限攔截中做復(fù)雜的異步操作（如調(diào)接口驗(yàn)證 Token）：會(huì)導(dǎo)致頁面加載卡頓。

總結(jié)：Token 全流程核心邏輯

1. 獲取：登錄接口返回 → 提取 Token；
2. 存儲(chǔ)：選對(duì)存儲(chǔ)方式（推薦 localStorage）→ 全局可讀取、刷新不丟；
3. 使用：請(qǐng)求攔截器自動(dòng)帶 Token → 放在請(qǐng)求頭里；
4. 過期：響應(yīng)攔截器處理 401 → 清除 Token、跳登錄頁；
5. 清除：用戶登出 → 徹底清除所有數(shù)據(jù)、跳登錄頁；
6. 控制：路由守衛(wèi) → 未登錄用戶不能訪問受保護(hù)頁面。

避坑總覽（新手必看）

1. ? 不要只存全局狀態(tài)不存本地存儲(chǔ)：刷新頁面后數(shù)據(jù)會(huì)清空；
2. ? 不要在每個(gè)請(qǐng)求里手動(dòng)加 Token：用請(qǐng)求攔截器統(tǒng)一處理；
3. ? 不要忽略 Token 過期的 401 錯(cuò)誤：必須強(qiáng)制用戶重新登錄；
4. ? 不要在 Token 里存敏感信息：Token 僅作為憑證；
5. ? 不要省略登出的二次確認(rèn)：避免用戶誤操作。

總結(jié) 

到此這篇關(guān)于前端通用Token操作的文章就介紹到這了,更多相關(guān)前端通用Token操作內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論