用戶登錄與 Token 管理全流程（JWT 實戰(zhàn)）
作者：Ss肥魚
在前后端分離項目中，用戶登錄常通過后端頒發(fā)的 JWT Token 實現(xiàn)身份校驗，配合本地緩存與請求頭傳遞，完成安全且高效的用戶系統(tǒng)。
在前后端分離項目中，用戶登錄常通過后端頒發(fā)的 JWT Token 實現(xiàn)身份校驗，配合本地緩存與請求頭傳遞，完成安全且高效的用戶系統(tǒng)。
通過前面的基礎(chǔ)學(xué)習(xí)，本文將帶你實現(xiàn)：
- 登錄接口調(diào)用與 Token 獲取
- Token 本地緩存與讀取
- 請求時自動攜帶 Authorization
- Token 失效統(tǒng)一處理
登錄流程 & 獲取 Token
后端登錄接口通常返回一個 access_token：
示例接口：
POST /api/login
請求：{ username, password }
響應(yīng)：{ access_token, user_info }頁面調(diào)用（如：pages/login.vue）：
import { postRequest } from'@/utils/request.js'
import { set } from'@/utils/storage.js'
constlogin = async () => {
const res = awaitpostRequest('/login', {
username: userName.value,
password: password.value
})
// 存儲 Token 和用戶信息
set('token', res.access_token)
set('userInfo', res.user_info)
uni.showToast({ title: '登錄成功' })
uni.switchTab({ url: '/pages/home/index' }) // 跳轉(zhuǎn)首頁
}本地 Token 緩存
utils/storage.js 緩存工具封裝：
export constset = (key, value) => {
uni.setStorageSync(key, value)
}
exportconstget = (key) => {
return uni.getStorageSync(key)
}
exportconstremove = (key) => {
uni.removeStorageSync(key)
}- 登錄后使用 set('token', access_token) 存儲
- 請求時使用 get('token') 獲取
- 退出登錄時調(diào)用 remove('token')
自動攜帶 Authorization 請求頭
我們在通用請求模塊中加攔截處理：
utils/request.js：
import config from'@/config/index.js'
import { get, remove } from'./storage.js'
constrequest = (options = {}) => {
const token = get('token') || ''
returnnewPromise((resolve, reject) => {
uni.request({
url: config.baseURL + options.url,
method: options.method || 'GET',
data: options.data || {},
header: {
'Content-Type': 'application/json',
'Authorization': `Bearer ${token}`,
...(options.header || {})
},
success: (res) => {
const { statusCode, data } = res
// Token 失效統(tǒng)一處理
if (statusCode === 401) {
uni.showToast({ title: '登錄已過期，請重新登錄', icon: 'none' })
remove('token')
setTimeout(() => {
uni.reLaunch({ url: '/pages/login/index' })
}, 1000)
returnreject(data)
}
if (statusCode === 200) {
resolve(data)
} else {
uni.showToast({ title: data.message || '請求失敗', icon: 'none' })
reject(data)
}
},
fail: (err) => {
uni.showToast({ title: '網(wǎng)絡(luò)異常', icon: 'none' })
reject(err)
}
})
})
}- 自動注入 Authorization: Bearer token ，這個Bearer+空格按自己的后端實際需求添加
- Token 失效時自動跳轉(zhuǎn)登錄頁
退出登錄處理
import { remove } from '@/utils/storage.js'
const logout = () => {
remove('token')
remove('userInfo')
uni.reLaunch({ url: '/pages/login/index' })
}可以放在 “我的頁面” 里做登出按鈕邏輯。
總結(jié)一張圖
[ 登錄頁 ]
↓
[ 輸入賬號密碼 ]
↓
[ 請求登錄接口 ]
↓
[ 拿到 token + 存儲 ]
↓
[ 通用請求模塊 => 自動帶 token ]
↓
[ 401 失效自動跳登錄 ]責(zé)任編輯：趙寧寧
來源：
Ssoul肥魚
