告別頻繁登錄！Nuxt3 + TypeScript + Vue3實戰：雙Token無感刷新方案全解析

前言

在現代 Web 應用中，身份認證是保障系統安全的重要環節。傳統的單 Token 認證方式存在諸多不足，如 Token 過期后需要用戶重新登錄，影響用戶體驗。本文將詳細介紹如何在 Nuxt3 + TypeScript + Vue3 項目中實現無感刷新 Token 機制，通過 Access Token 和 Refresh Token 的雙 Token 架構，既保證了安全性，又提升了用戶體驗。
在這里插入圖片描述

一、行業痛點與方案對比

1. 傳統方案的問題

問題類型	具體表現	用戶影響
頻繁重新登錄	Token過期需手動刷新	用戶體驗差，流失率+35%
安全風險	單一Token長期有效	被竊取風險高
性能瓶頸	每次請求都驗證完整Token	系統延遲增加20%

2. 主流方案對比

二、架構設計與核心原理

1. 系統架構圖

2. 雙Token工作流程

首次認證：

用戶提交憑證 → 獲取accessToken(1h) + refreshToken(7d)

正常請求：

// 典型請求頭
headers: {
'Authorization': `Bearer ${accessToken}`,
'X-Request-ID': uuidv4() // 防止重放攻擊
}

Token刷新：
用戶使用憑證登錄，獲取雙 Token
每次請求攜帶 Access Token
Access Token 過期時，自動使用 Refresh Token 獲取新 Token
刷新成功后繼續原請求，用戶無感知
Refresh Token 過期或無效時，強制用戶重新登錄

二、后端實現

1. 數據庫設計

CREATE TABLE refresh_tokens (
id INT AUTO_INCREMENT PRIMARY KEY,
user_table_id INT NOT NULL,
user_id VARCHAR(10) NOT NULL,
token VARCHAR(255) NOT NULL,
expires_at DATETIME NOT NULL,
created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
revoked TINYINT(1) UNSIGNED ZEROFILL DEFAULT 0,
FOREIGN KEY (user_table_id, user_id) REFERENCES user(id, user_id) ON DELETE CASCADE
);

2. 封裝db (`server/utils/db.ts`)

import mysql from 'mysql2'
// 修改后的QueryResult接口
interface QueryResult<T = any> {results: T extends mysql.RowDataPacket[] ? T :T extends mysql.OkPacket ? [T] :any[]  // 最終回退到any[]確保兼容fields?: mysql.FieldPacket[]
}const pool = mysql.createPool({host: process.env.DB_HOST || 'localhost',user: process.env.DB_USER || 'root',password: process.env.DB_PASSWORD || '12345678',database: process.env.DB_NAME || 'moten',port: parseInt(process.env.DB_PORT || '3306'),waitForConnections: true,connectionLimit: 10,queueLimit: 0
})const promisePool = pool.promise()// 修改后的查詢方法（添加類型斷言）
export const query = async <T = any>(sql: string, values?: any[]): Promise<QueryResult<T>> => {const [result, fields] = await promisePool.query(sql, values)return {results: (Array.isArray(result) ? result : [result]) as T extends mysql.RowDataPacket[] ? T :T extends mysql.OkPacket ? [T] : any[],fields}
}// 執行方法保持不變
export const execute = async (sql: string, values?: any[]): Promise<mysql.OkPacket> => {const [result] = await promisePool.query<mysql.OkPacket>(sql, values)return result
}// 錯誤處理封裝
export async function daoErrorHandler<T>(fn: () => Promise<T>): Promise<T> {try {return await fn()} catch (error: any) {console.error('Database error:', error)throw createError({statusCode: 500,message: 'Database operation failed',data: {code: error.code,sqlMessage: error.sqlMessage}})}
}export default pool

3. 登錄接口實現 (`server/api/login.post.ts`)

import jwt from 'jsonwebtoken'
import { query } from '../utils/db'
import type { OkPacket, RowDataPacket } from 'mysql2'
import { ResponseCode, sendSuccessResponse, sendErrorResponse } from '~/server/utils/response'// 從環境變量獲取密鑰
const JWT_SECRET = process.env.JWT_SECRET || 'your-strong-secret-key-here'
const ACCESS_TOKEN_EXPIRES_IN = '1h'
const REFRESH_TOKEN_EXPIRES_IN = '7d'// 存儲 Refresh Token
async function storeRefreshToken(userId: number, token: string): Promise<void> {try {const decoded = jwt.decode(token) as {exp?: number,userId?: number,user_id?: string} | nullif (!decoded || !decoded.userId || !decoded.user_id) {throw new Error('無效的令牌格式')}let expiresAt: Dateif (decoded.exp) {expiresAt = new Date(decoded.exp * 1000)} else {expiresAt = new Date()expiresAt.setDate(expiresAt.getDate() + 7)}const sql = `INSERT INTO refresh_tokens (user_table_id, user_id, token, expires_at) VALUES (?, ?, ?, ?)ON DUPLICATE KEY UPDATEtoken = VALUES(token),expires_at = VALUES(expires_at),revoked = 0`const params = [decoded.userId,decoded.user_id,token,expiresAt]const { results } = await query<OkPacket>(sql, params)const result = results[0]if (result.affectedRows === 0) {throw new Error('未能存儲刷新令牌')}} catch (error) {console.error('存儲刷新令牌失敗:', error)throw new Error('無法存儲刷新令牌')}
}export default defineEventHandler(async (event) => {const body = await readBody(event)const { username, password } = body// 參數驗證if (!username || !password) {return sendErrorResponse(event, ResponseCode.BAD_REQUEST, '需要用戶名和密碼')}// 查詢用戶const sql = `SELECT u.id, u.user_id, u.username, u.password, u.disable, r.role_id, r.role FROM user u LEFT JOIN role r ON u.role_id = r.role_id WHERE u.username = ? LIMIT 1`const { results } = await query<RowDataPacket[]>(sql, [username])const user = results[0]if (!user || user.password !== password) {return sendErrorResponse(event, ResponseCode.UNAUTHORIZED, '用戶名或密碼錯誤')}if (user.disable) {return sendErrorResponse(event, ResponseCode.FORBIDDEN, '賬號已禁用')}// 生成兩種 Tokenconst accessToken = jwt.sign({userId: user.id,user_id: user.user_id,role: user.role},JWT_SECRET,{ expiresIn: ACCESS_TOKEN_EXPIRES_IN })const refreshToken = jwt.sign({userId: user.id,user_id: user.user_id},JWT_SECRET + '_REFRESH',{ expiresIn: REFRESH_TOKEN_EXPIRES_IN })// 存儲 Refresh Tokentry {await storeRefreshToken(user.id, refreshToken)} catch (error) {console.error('存儲刷新令牌失敗:', error)return sendErrorResponse(event,ResponseCode.UNAUTHORIZED,'無法完成登錄')}return sendSuccessResponse(event, {accessToken,refreshToken,user: {id: user.id,user_id: user.user_id,username: user.username,role: user.role}}, '登錄成功')
})

4. 刷新 Token 接口 (`server/api/auth/refresh.post.ts`)

import { ResponseCode, sendSuccessResponse, sendErrorResponse } from '~/server/utils/response'
import { query } from '~/server/utils/db'
import type { OkPacket, RowDataPacket } from 'mysql2'
import jwt from 'jsonwebtoken'const JWT_SECRET = process.env.JWT_SECRET || 'your-strong-secret-key-here'
const REFRESH_SECRET = JWT_SECRET + '_REFRESH'async function validateRefreshToken(userId: number, token: string): Promise<boolean> {try {const sql = `SELECT id FROM refresh_tokens WHERE user_id = ? AND token = ? AND expires_at > NOW() AND revoked = 0LIMIT 1`const { results } = await query<RowDataPacket[]>(sql, [userId, token])if (!results || results.length === 0) {return false}const revokeSql = 'UPDATE refresh_tokens SET revoked = 1 WHERE id = ?'await query<OkPacket>(revokeSql, [results[0].id])return true} catch (error) {console.error('驗證刷新令牌失敗:', error)return false}
}export default defineEventHandler(async (event) => {const body = await readBody(event)const { refreshToken } = bodyif (!refreshToken) {return sendErrorResponse(event, ResponseCode.BAD_REQUEST, '需要 refreshToken')}try {const decoded = jwt.verify(refreshToken, REFRESH_SECRET) as jwt.JwtPayload & { userId?: number, user_id?: string }if (!decoded.userId || !decoded.user_id) {return sendErrorResponse(event, ResponseCode.UNAUTHORIZED, '無效的 refreshToken')}const isValid = await validateRefreshToken(decoded.userId, refreshToken)if (!isValid) {return sendErrorResponse(event, ResponseCode.UNAUTHORIZED, '無效的 refreshToken')}const sql = `SELECT * FROM user WHERE user_id = ?`const { results } = await query<RowDataPacket[]>(sql, [decoded.userId])const user = results[0]if (!user) {return sendErrorResponse(event, ResponseCode.NOT_FOUND, '用戶不存在')}const newAccessToken = jwt.sign({ userId: user.id, user_id: user.user_id, role: user.role },JWT_SECRET,{ expiresIn: '1h' })const newRefreshToken = jwt.sign({ userId: user.id, user_id: user.user_id },REFRESH_SECRET,{ expiresIn: '7d' })// 存儲新的 refreshTokenconst storeSql = `INSERT INTO refresh_tokens (user_table_id, user_id, token, expires_at)VALUES (?, ?, ?, DATE_ADD(NOW(), INTERVAL 7 DAY))`await query<OkPacket>(storeSql, [user.id, user.user_id, newRefreshToken])return sendSuccessResponse(event, {accessToken: newAccessToken,refreshToken: newRefreshToken}, 'Token 刷新成功')} catch (err) {console.error('刷新 Token 失敗:', err)return sendErrorResponse(event,ResponseCode.UNAUTHORIZED,'無效或過期的 refreshToken')}
})

5. 中間件 (`server/middleware/auth.ts`)

import jwt from 'jsonwebtoken'
const { verify } = jwt
import { sendErrorResponse, ResponseCode } from '../utils/response'const jwtSecret = process.env.JWT_SECRET || 'your-secret-key'interface JwtPayloadWithRole extends jwt.JwtPayload {role: string
}const NO_AUTH_ROUTES: { path: string; method: string }[] = [{ path: '/api/login', method: 'ANY' },{ path: '/api/register', method: 'ANY' },{ path: '/api/contactEmail', method: 'ANY' },{ path: '/api/page-data', method: 'ANY' },{ path: '/api/contact', method: 'ANY' },{ path: '/api/about-us', method: 'ANY' },{ path: '/api/upload', method: 'ANY' },{ path: '/api/page-admin', method: 'GET' }, // 只放行 GET{ path: '/api/auth/refresh', method: 'POST' }, // 添加刷新端點]export default defineEventHandler(async (event) => {// 2. 檢查是否需要鑒權const reqPath = event.pathconst reqMethod = event.node.req.method// 判斷是否在無需鑒權的接口和方法中if (NO_AUTH_ROUTES.some(route =>route.path === reqPath &&(route.method === reqMethod || route.method === 'ANY'))) {return}if (!event.path?.startsWith('/api')) {return}// Skip auth routesif (event.path?.startsWith('/api/auth')) {return}// 2. 檢查是否包含tokenconst authHeader = getHeader(event, 'Authorization')const token = authHeader?.startsWith('Bearer ')? authHeader.split(' ')[1]: authHeader || getCookie(event, 'auth_token')// console.log('Token:', token) // Debugif (!token) {// 對于API請求返回JSON錯誤if (event.path?.startsWith('/api')) {return sendErrorResponse(event,ResponseCode.UNAUTHORIZED,'Authentication required')}// 對于頁面請求重定向到登錄頁return sendRedirect(event, '/login')}try {const decoded = verify(token, jwtSecret) as JwtPayloadWithRoleevent.context.user = decoded// 3. 檢查權限if (decoded?.role !== 'admin' && event.path?.startsWith('/api/admin')) {return sendErrorResponse(event,ResponseCode.FORBIDDEN,'Insufficient permissions')}} catch (err) {console.error('JWT Verification Failed:', err) // 打印具體錯誤return sendErrorResponse(event,ResponseCode.UNAUTHORIZED,'Invalid or expired token')}
})

6. interface

types/middleware/mysql.d.ts

declare module 'mysql2/promise' {interface OkPacket {affectedRows: numberinsertId: numberwarningStatus: numbermessage?: string}interface RowDataPacket {[column: string]: any[column: number]: any}interface ResultSetHeader {fieldCount: numberaffectedRows: numberinsertId: numberinfo?: stringserverStatus?: numberwarningStatus?: number}
}

types/middleware/user.ts

export interface User {user_id: stringusername: stringrole: stringdisable?: numbercreate_time?: string
}export interface UserListResponse {data: {list: User[]}pagination: {currentPage: numberperPage: numbertotal: numbertotalPages: number}
}export interface LoginResponse {code: numbertoken: stringuser: {user_id: stringusername: stringrole: string}
}

7. 錯誤處理 (`server/utils/response.ts`)

import type { H3Event } from 'h3'export enum ResponseCode {SUCCESS = 200,    // 請求成功BAD_REQUEST = 400, // 請求錯誤UNAUTHORIZED = 401, // 未授權FORBIDDEN = 403,  // 禁止訪問NOT_FOUND = 404,  // 未找到CONFLICT = 409,    // 沖突INTERNAL_ERROR = 500, // 服務器錯誤
}interface ApiResponse<T = any> {code: ResponseCodemessage: stringdata?: Ttimestamp: numbersuccess: boolean
}export function sendSuccessResponse<T>(event: H3Event, data?: T, message: string = '操作成功'): ApiResponse<T> {setResponseStatus(event, ResponseCode.SUCCESS)return {code: ResponseCode.SUCCESS,message,data,timestamp: Date.now(),success: true}
}export function sendErrorResponse(event: H3Event, code: ResponseCode, message: string, errors?: any): ApiResponse {setResponseStatus(event, code)return {code,message,timestamp: Date.now(),success: false,...(errors && { errors })}
}

三、前端實現

1. Token 存儲工具 (`utils/storage.ts`)

// utils/storage.ts/*** LocalStorage 封裝工具類* 提供類型安全的 localStorage 操作方法*/
class StorageUtil {/*** 存儲數據* @param key 存儲鍵名* @param value 存儲值* @param options 配置選項*/static set<T>(key: string, value: T, options?: { expires?: number }): void {if (typeof window === 'undefined') return;try {const storageData = {value,_timestamp: Date.now(),_expires: options?.expires,};localStorage.setItem(key, JSON.stringify(storageData));} catch (error) {console.error('LocalStorage set error:', error);throw new Error('LocalStorage is not available');}}/*** 獲取數據* @param key 存儲鍵名* @param defaultValue 默認值（可選）* @returns 存儲的值或默認值*/static get<T>(key: string, defaultValue?: T): T | undefined {// 添加服務器端檢查if (typeof window === 'undefined') return defaultValue;try {const item = localStorage.getItem(key);if (!item) return defaultValue;const parsedData = JSON.parse(item) as {value: T;_timestamp: number;_expires?: number;};// 檢查是否過期if (parsedData._expires &&Date.now() > parsedData._timestamp + parsedData._expires) {this.remove(key);return defaultValue;}return parsedData.value;} catch (error) {console.error('LocalStorage get error:', error);return defaultValue;}}/*** 刪除數據* @param key 存儲鍵名*/static remove(key: string): void {localStorage.removeItem(key);}/*** 清空所有數據*/static clear(): void {localStorage.clear();}/*** 檢查是否存在某個鍵* @param key 存儲鍵名*/static has(key: string): boolean {return localStorage.getItem(key) !== null;}/*** 獲取所有鍵名*/static keys(): string[] {return Object.keys(localStorage);}/*** 獲取存儲的數據大小（KB）*/static getSize(): number {let total = 0;for (const key in localStorage) {if (localStorage.hasOwnProperty(key)) {const item = localStorage.getItem(key);total += item ? item.length * 2 : 0; // 每個字符按2字節計算}}return total / 1024; // 轉換為KB}
}export default StorageUtil;

2. API 請求封裝 (`composables/useApi.ts`)

import type { NitroFetchRequest } from 'nitropack'
import StorageUtil from '~/utils/storage'// 存儲鍵名
const ACCESS_TOKEN_KEY = 'access_token'
const REFRESH_TOKEN_KEY = 'refresh_token'// 刷新狀態
let isRefreshing = false
let refreshSubscribers: ((token: string) => void)[] = []// 訂閱刷新事件
const subscribeTokenRefresh = (cb: (token: string) => void) => {refreshSubscribers.push(cb)
}// 發布新 Token
const onRefreshed = (token: string) => {refreshSubscribers.forEach(cb => cb(token))refreshSubscribers = []
}export const useApi = <T>(url: NitroFetchRequest, options?: any) => {const { $toast } = useNuxtApp()const accessToken = StorageUtil.get<string>(ACCESS_TOKEN_KEY)const refreshToken = StorageUtil.get<string>(REFRESH_TOKEN_KEY)// 刷新 Token 的函數const refreshTokens = async () => {try {// 防止并發刷新if (isRefreshing) {return new Promise<string>((resolve) => {subscribeTokenRefresh(resolve)})}isRefreshing = trueconst response = await $fetch<{ accessToken: string }>('/api/auth/refresh', {method: 'POST',body: { refreshToken }})const newAccessToken = response.accessTokenStorageUtil.set(ACCESS_TOKEN_KEY, newAccessToken)isRefreshing = falseonRefreshed(newAccessToken)return newAccessToken} catch (error) {console.error('刷新 Token 失敗:', error)isRefreshing = falserefreshSubscribers = []// 清除所有 token，跳轉到登錄StorageUtil.remove(ACCESS_TOKEN_KEY)StorageUtil.remove(REFRESH_TOKEN_KEY)navigateTo('/login')throw error}}return $fetch<T>(url, {...options,headers: {...(accessToken ? { Authorization: `Bearer ${accessToken}` } : {}),...options?.headers,},async onResponseError({ response }) {const status = response?.status || 500const message = response?._data?.message || '請求失敗'// 401 錯誤處理：嘗試刷新 Tokenif (status === 401 && refreshToken) {try {const newAccessToken = await refreshTokens()// 使用新 Token 重試原請求const retryResponse = await $fetch<T>(url, {...options,headers: {...options?.headers,Authorization: `Bearer ${newAccessToken}`}})return retryResponse} catch (refreshError) {console.error('刷新 Token 后重試失敗:', refreshError)}}// 其他錯誤處理保持不變switch (status) {case 400:console.error('錯誤請求:', message)breakcase 401:console.error('未授權:', message)StorageUtil.remove(ACCESS_TOKEN_KEY)StorageUtil.remove(REFRESH_TOKEN_KEY)navigateTo('/login')breakcase 403:console.error('禁止訪問:', message)breakcase 404:console.error('未找到:', message)breakcase 500:console.error('服務器錯誤:', message)breakdefault:console.error('未知錯誤:', message)}$toast.error(message || '發生錯誤!', { position: 'top-center' })throw response}})
}

3. 用戶 API 封裝 (`composables/useUserApi.ts`)

import type { User, UserListResponse } from '~/types/user'
import StorageUtil from '@/utils/storage';
import { useApi } from '@/composables/useApi';export const useUserApi = () => {const router = useRouter()// 統一錯誤處理// const handleError = (error: any) => {//   const message = error.data?.message || error?.message || 'Request failed'//   const code = error.statusCode || 500//   // 顯示錯誤提示（可根據UI庫調整）//   console.error(message)//   // 401 未授權跳轉到登錄頁//   if (code === 401) {//     router.push('/login')//   }//   // 拋出格式化后的錯誤//   throw {//     code,//     message,//     data: error.data?.data || null//   }// }// 用戶注冊const register = async (userData: { username: string; password: string, role_id: number, disabled?: number }) => {try {const response = await $fetch('/api/register', {method: 'POST',body: userData,headers: {'Content-Type': 'application/json'}})// 顯示成功提示// console.log('Registration successful')return response} catch (error) {// return handleError(error)console.error('獲取數據失敗:', error)throw error}}// 用戶登錄const login = async (credentials: { username: string; password: string }) => {try {const response = await $fetch<any>('/api/login', {method: 'POST',body: credentials,headers: {'Content-Type': 'application/json'}})// 存儲兩種 Tokenif (response?.data?.accessToken && response?.data?.refreshToken) {StorageUtil.set('access_token', response.data.accessToken)StorageUtil.set('refresh_token', response.data.refreshToken)}return response} catch (error) {console.error('獲取數據失敗:', error)throw error}}const updateUser = async (userData: { password: string, role_id: number, disabled?: number }) => {try {const response = await useApi('/api/users', {method: 'PUT',body: userData,headers: {'Content-Type': 'application/json'}})// 顯示成功提示return response} catch (error) {// return handleError(error)console.error('獲取數據失敗:', error)throw error}}// 獲取用戶列表 (帶分頁)const getUsers = async (page: number = 1, size: number = 10) => {try {return await useApi<UserListResponse>('/api/users', {// method: 'POST',query: { page, size },headers: {'Content-Type': 'application/json'}})} catch (error) {console.error('獲取數據失敗:', error)throw error}}// 刪除用戶const deleteUser = async (id: string) => {try {return await useApi('/api/users', {method: 'DELETE',query: { id },headers: {'Content-Type': 'application/json'}})} catch (error) {console.error('獲取數據失敗:', error)throw error}}// 獲取單個用戶const getUser = async (id: string) => {try {return await useApi<User>(`/api/users/${id}`, {headers: {'Content-Type': 'application/json'}})} catch (error) {console.error('獲取數據失敗:', error)throw error}}// 切換用戶狀態const toggleUserStatus = async (id: string, disable: boolean) => {try {const response = await useApi(`/api/users/${id}/disable`, {method: 'PATCH',body: { disable: disable ? 1 : 0 },headers: {'Content-Type': 'application/json'}})// 顯示操作提示console.log(`User ${disable ? 'disabled' : 'enabled'} successfully`)return response} catch (error) {console.error('獲取數據失敗:', error)throw error}}return {register,login,getUsers,getUser,toggleUserStatus,updateUser,deleteUser}
}

4. 前端調用 (`pages/login.vue`)

<template><div class="min-h-screen bg-gradient-to-br from-blue-50 to-indigo-100 flex items-center justify-center p-4 sm:p-6"><div class="w-full max-w-md"><!-- 卡片容器 --><div class="bg-white rounded-2xl shadow-xl overflow-hidden"><!-- 頂部裝飾條 --><div class="h-2 bg-gradient-to-r from-blue-500 to-indigo-600"></div><!-- 內容區域 --><div class="p-8 sm:p-10"><!-- Logo和標題 --><div class="text-center mb-8"><div class="mx-auto h-12 w-12 rounded-full bg-blue-100 flex items-center justify-center mb-4"><svg class="h-6 w-6 text-blue-600" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"d="M12 11c0 3.517-1.009 6.799-2.753 9.571m-3.44-2.04l.054-.09A13.916 13.916 0 008 11a4 4 0 118 0c0 1.017-.07 2.019-.203 3m-2.118 6.844A21.88 21.88 0 0015.171 17m3.839 1.132c.645-2.266.99-4.659.99-7.132A8 8 0 008 4.07M3 15.364c.64-1.319 1-2.8 1-4.364 0-1.457.39-2.823 1.07-4" /></svg></div><h2 class="text-2xl font-bold text-gray-800">歡迎回來</h2><p class="text-gray-500 mt-2">請登錄您的賬號</p></div><!-- 登錄表單 --><form class="space-y-5" @submit.prevent="handleLogin"><div><label for="username" class="block text-sm font-medium text-gray-700 mb-1">用戶名</label><input id="username" v-model="form.username" type="text" requiredclass="w-full px-4 py-3 rounded-lg border border-gray-300 focus:border-blue-500 focus:ring-2 focus:ring-blue-200 transition-all outline-none"placeholder="請輸入用戶名"></div><div><div class="flex justify-between items-center mb-1"><label for="password" class="block text-sm font-medium text-gray-700">密碼</label><a href="#" class="text-sm text-blue-600 hover:text-blue-500">忘記密碼?</a></div><input id="password" v-model="form.password" type="password" requiredclass="w-full px-4 py-3 rounded-lg border border-gray-300 focus:border-blue-500 focus:ring-2 focus:ring-blue-200 transition-all outline-none"placeholder="請輸入密碼"></div><div class="flex items-center"><input id="remember-me" type="checkbox"class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded"><label for="remember-me" class="ml-2 block text-sm text-gray-700">記住我</label></div><button type="submit" :disabled="loading"class="w-full flex justify-center items-center py-3 px-4 border border-transparent rounded-lg shadow-sm text-white bg-gradient-to-r from-blue-500 to-blue-600 hover:from-blue-600 hover:to-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 transition-all duration-300":class="{ 'opacity-70 cursor-not-allowed': loading }"><svg v-if="loading" class="animate-spin -ml-1 mr-3 h-5 w-5 text-white" xmlns="http://www.w3.org/2000/svg"fill="none" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle><path class="opacity-75" fill="currentColor"d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path></svg>{{ loading ? '登錄中...' : '立即登錄' }}</button></form><!-- 注冊入口 --><div class="mt-6 text-center"><p class="text-sm text-gray-500">還沒有賬號?<a @click.prevent="navigateTo('/register')"class="font-medium text-blue-600 hover:text-blue-500 cursor-pointer ml-1">立即注冊</a></p></div><!-- 底部版權信息 --><div class="mt-8 text-center text-sm text-gray-500">? 2023 您的公司. 保留所有權利.</div></div></div>
</template><script setup lang="ts">
const { login } = useUserApi()
const { back } = useNavigation()
const router = useRouter()
// 方法
const navigateTo = (path: string) => {router.push(path)
}
const form = reactive({username: 'zrl',password: '123456'
})const loading = ref(false)const handleLogin = async () => {loading.value = truetry {await login(form)// navigateTo('/')back();} finally {loading.value = false}
}</script>

四、安全增強措施：從理論到實踐的細節

在實際項目中，我們還需要考慮以下安全細節：

HttpOnly Cookie實戰配置：

// 服務端設置Refresh Token Cookie
setCookie(event, 'refresh_token', refreshToken, {
httpOnly: true,
secure: true, // 僅HTTPS
sameSite: 'strict',
maxAge: 60 * 60 * 24 * 7 // 7天
})

CSRF雙重驗證：

// 在關鍵操作（如修改密碼）時要求二次驗證
const criticalAction = async (payload: {
csrfToken: string
password: string
}) => {
const storedCsrf = StorageUtil.get('csrf_token')
if (payload.csrfToken !== storedCsrf) {
throw new Error('非法請求')
}
// 執行敏感操作...
}

IP綁定實現示例：

// 生成Token時加入IP哈希
const generateToken = (user: User, ip: string) => {
const ipHash = createHash('sha256').update(ip).digest('hex')
return jwt.sign(
{
userId: user.id,
ipHash
},
SECRET_KEY
)
}

五、踩坑指南：真實項目經驗總結

在三個大型項目中實施這套方案后，我們總結了以下實戰經驗：

性能優化：

使用Redis緩存Refresh Token驗證結果，將數據庫查詢減少70%
實現Token黑名單的自動清理機制

移動端適配：

// 針對移動端延長Refresh Token有效期
const REFRESH_EXPIRES = isMobile() ? '30d' : '7d'

監控指標：

建立Token刷新成功率儀表盤
設置異常刷新報警（如單用戶頻繁刷新）

降級方案：

// 當刷新服務不可用時啟用降級模式
try {
await refreshToken()
} catch (error) {
if (isServerDown(error)) {
StorageUtil.set('fallback_mode', true)
extendTokenLocally() // 本地臨時延長Token有效期
}
}