优化登录流程，添加白名单管理功能，调整页面布局与样式

2025-04-07 15:42:09 +08:00
parent a16faadaab
commit a2c18a1be8
21 changed files with 1388 additions and 102 deletions
--- a/src/lib/api.ts
+++ b/src/lib/api.ts
@@ -1,6 +1,9 @@
 // API工具函数

 // 定义后端服务URL和OAuth2配置
+import {cookies} from 'next/headers'
+import {redirect} from 'next/navigation'
+
 const API_BASE_URL = process.env.API_BASE_URL
 const CLIENT_ID = process.env.CLIENT_ID
 const CLIENT_SECRET = process.env.CLIENT_SECRET
@@ -11,6 +14,10 @@ interface TokenCache {
  expires: number // 过期时间戳
 }

+// ======================
+// region device token
+// ======================
+
 let tokenCache: TokenCache | null = null

 // 获取OAuth2访问令牌
@@ -21,7 +28,7 @@ export async function getAccessToken(forceRefresh = false): Promise<string> {
      return tokenCache.token
    }

-    const addr = `http://${API_BASE_URL}/api/auth/token`
+    const addr = `${API_BASE_URL}/api/auth/token`
    const body = {
      client_id: CLIENT_ID,
      client_secret: CLIENT_SECRET,
@@ -70,7 +77,7 @@ export async function call<R = undefined>(endpoint: string, data: unknown): Prom
      },
      body: JSON.stringify(data),
    }
-    let response = await fetch(`http://${API_BASE_URL}${endpoint}`, requestOptions)
+    let response = await fetch(`${API_BASE_URL}${endpoint}`, requestOptions)

    // 如果返回401未授权，尝试刷新令牌并重试一次
    if (response.status === 401) {
@@ -78,44 +85,21 @@ export async function call<R = undefined>(endpoint: string, data: unknown): Prom

      // 使用新令牌重试请求
      requestOptions.headers['Authorization'] = `Bearer ${await accessToken}`
-      response = await fetch(`http://${API_BASE_URL}${endpoint}`, requestOptions)
+      response = await fetch(`${API_BASE_URL}${endpoint}`, requestOptions)
    }

-    // 解析响应数据
-    const type = response.headers.get('Content-Type') ?? 'text/plain'
-    if (type.indexOf('application/json') !== -1) {
-      const json = await response.json()
-      if (!response.ok) {
-        console.log('响应不成功', `status=${response.status}`, json)
-        return {
-          success: false,
-          status: response.status,
-          message: json.message || '请求失败',
-        }
-      }
+    // 检查响应状态
+    if (!response.ok) {
+      console.log('响应不成功', `status=${response.status}`, await response.text())
      return {
-        success: true,
-        data: json,
+        success: false,
+        status: response.status,
+        message: '请求失败',
      }
    }
-    else if (type.indexOf('text/plain') !== -1) {
-      const text = await response.text()
-      if (!response.ok) {
-        console.log('响应不成功', `status=${response.status}`, text)
-        return {
-          success: false,
-          status: response.status,
-          message: text || '请求失败',
-        }
-      }
-      return {
-        success: true,
-        data: undefined as unknown as R, // 强转类型，考虑优化
-      }
-    }
-    else {
-      throw new Error(`无法解析响应数据，未处理的 Content-Type: ${type}`)
-    }
+
+    // 检查响应状态
+    return handleResponse(response)
  }
  catch (e) {
    console.error('API call failed:', e)
@@ -123,82 +107,169 @@ export async function call<R = undefined>(endpoint: string, data: unknown): Prom
  }
 }

+
+// endregion
+
+// ======================
+// region user token
+// ======================
+
+async function getUserToken(refresh = false): Promise<string> {
+  // 从 cookie 中获取用户令牌
+  const cookie = await cookies()
+  const userToken = cookie.get('auth_token')?.value
+  const userRefresh = cookie.get('auth_refresh')?.value
+
+  // 检查缓存的令牌是否可用
+  if (!refresh && userToken) {
+    return userToken
+  }
+
+  // 如果没有刷新令牌，抛出异常
+  if (!userRefresh) {
+    throw UnauthorizedError
+  }
+
+  // 请求刷新访问令牌
+  const addr = `${API_BASE_URL}/api/auth/token`
+  const body = {
+    grant_type: 'refresh_token',
+    client_id: CLIENT_ID,
+    client_secret: CLIENT_SECRET,
+    refresh_token: userRefresh,
+  }
+
+  const response = await fetch(addr, {
+    method: 'POST',
+    headers: {
+      'Content-Type': 'application/json',
+    },
+    body: JSON.stringify(body),
+  })
+
+  if (!response.ok) {
+    console.log('刷新令牌失败', `status=${response.status}`, await response.text())
+    throw UnauthorizedError
+  }
+
+  // 保存新的用户令牌到 cookie
+  const data = await response.json()
+  const nextAccessToken = data.access_token
+  const nextRefreshToken = data.refresh_token
+  const expiresIn = data.expires_in
+
+  cookie.set('auth_token', nextAccessToken, {
+    httpOnly: true,
+    sameSite: 'strict',
+    secure: process.env.NODE_ENV === 'production',
+    maxAge: Math.max(expiresIn, 0),
+  })
+  cookie.set('auth_refresh', nextRefreshToken, {
+    httpOnly: true,
+    sameSite: 'strict',
+    secure: process.env.NODE_ENV === 'production',
+    maxAge: 7 * 24 * 3600, // 7天
+  })
+
+  return nextAccessToken
+}
+
 // 使用用户令牌的API调用函数
 export async function callWithUserToken<R = undefined>(
-  endpoint: string, 
-  data: unknown, 
-  userToken: string,
-  onTokenExpired?: () => void
+  endpoint: string,
+  data: unknown,
 ): Promise<ApiResponse<R>> {
  try {
+    let token = await getUserToken()
+
    // 发送请求
+    let response: Response
    const requestOptions = {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
-        'Authorization': `Bearer ${userToken}`,
+        'Authorization': `Bearer ${token}`,
      },
      body: JSON.stringify(data),
    }
-    
-    const response = await fetch(`http://${API_BASE_URL}${endpoint}`, requestOptions)

-    // 如果返回401未授权，可能是用户令牌过期
+    response = await fetch(`${API_BASE_URL}${endpoint}`, requestOptions)
+
    if (response.status === 401) {
-      // 通知调用者令牌已过期，需要刷新或重新登录
-      if (onTokenExpired) {
-        onTokenExpired()
+      token = await getUserToken(true)
+      requestOptions.headers['Authorization'] = `Bearer ${token}`
+      response = await fetch(`${API_BASE_URL}${endpoint}`, requestOptions)
+    }
+
+    // 检查响应状态
+    if (!response.ok) {
+      if (response.status === 401) {
+        throw UnauthorizedError
      }
-      
+
+      console.log('响应不成功', `status=${response.status}`, await response.text())
      return {
        success: false,
        status: response.status,
-        message: '用户会话已过期，请重新登录',
+        message: '请求失败',
      }
    }

-    // 解析响应数据
-    const type = response.headers.get('Content-Type') ?? 'text/plain'
-    if (type.indexOf('application/json') !== -1) {
-      const json = await response.json()
-      if (!response.ok) {
-        console.log('响应不成功', `status=${response.status}`, json)
-        return {
-          success: false,
-          status: response.status,
-          message: json.message || '请求失败',
-        }
-      }
-      return {
-        success: true,
-        data: json,
-      }
-    }
-    else if (type.indexOf('text/plain') !== -1) {
-      const text = await response.text()
-      if (!response.ok) {
-        console.log('响应不成功', `status=${response.status}`, text)
-        return {
-          success: false,
-          status: response.status,
-          message: text || '请求失败',
-        }
-      }
-      return {
-        success: true,
-        data: undefined as unknown as R,
-      }
-    }
-    else {
-      throw new Error(`无法解析响应数据，未处理的 Content-Type: ${type}`)
-    }
+    return handleResponse(response)
  }
  catch (e) {
+    // 重定向到登录页面
+    if (e === UnauthorizedError) {
+      redirect('/login')
+    }
+
    console.error('API call with user token failed:', e)
    throw new Error('服务调用失败', {cause: e})
  }
 }

+// endregion
+
+// 统一响应解析
+async function handleResponse<R = undefined>(response: Response): Promise<ApiResponse<R>> {
+
+  // 解析响应数据
+  const type = response.headers.get('Content-Type') ?? 'text/plain'
+  if (type.indexOf('application/json') !== -1) {
+    const json = await response.json()
+    if (!response.ok) {
+      console.log('响应不成功', `status=${response.status}`, json)
+      return {
+        success: false,
+        status: response.status,
+        message: json.message || '请求失败',
+      }
+    }
+    return {
+      success: true,
+      data: json,
+    }
+  }
+  else if (type.indexOf('text/plain') !== -1) {
+    const text = await response.text()
+    if (!response.ok) {
+      console.log('响应不成功', `status=${response.status}`, text)
+      return {
+        success: false,
+        status: response.status,
+        message: text || '请求失败',
+      }
+    }
+    return {
+      success: true,
+      data: undefined as unknown as R, // 强转类型，考虑优化
+    }
+  }
+  else {
+    throw new Error(`无法解析响应数据，未处理的 Content-Type: ${type}`)
+  }
+}
+
 // 统一的API响应类型
 export type ApiResponse<T = undefined> = {
  success: false
@@ -209,3 +280,11 @@ export type ApiResponse<T = undefined> = {
  data: T
 }

+export type PageRecord<T = unknown> = {
+  total: number
+  page: number
+  size: number
+  list: T[]
+}
+
+export const UnauthorizedError = new Error('未授权访问')