修复登录缺陷和用户信息展示部分

package.json

@@ -1,6 +1,6 @@
 {
   "name": "lanhu-admin",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "private": true,
   "scripts": {
     "dev": "next dev -H 0.0.0.0 --turbopack",

src/actions/auth.ts

@@ -1,7 +1,8 @@
 "use server"
 import { cookies } from "next/headers"
 import type { ApiResponse } from "@/lib/api"
-import { callByDevice } from "./base"
+import type { User } from "@/models/user"
+import { callByDevice, callByUser } from "./base"
 
 export type TokenResp = {
   access_token: string
@@ -29,12 +30,12 @@ export async function login(params: {
   // 保存到 cookies
   const data = resp.data
   const cookieStore = await cookies()
-  cookieStore.set("auth_token", data.access_token, {
+  cookieStore.set("admin/auth_token", data.access_token, {
     httpOnly: true,
     sameSite: "strict",
     maxAge: Math.max(data.expires_in, 0),
   })
-  cookieStore.set("auth_refresh", data.refresh_token, {
+  cookieStore.set("admin/auth_refresh", data.refresh_token, {
     httpOnly: true,
     sameSite: "strict",
     maxAge: Number.MAX_SAFE_INTEGER,
@@ -46,10 +47,47 @@ export async function login(params: {
   }
 }
 
+export async function logout() {
+  const cookieStore = await cookies()
+
+  // 尝试删除后台会话
+  const access_token = cookieStore.get("admin/auth_token")?.value
+  const refresh_token = cookieStore.get("admin/auth_refresh")?.value
+  if (access_token && refresh_token) {
+    await callByUser("/api/auth/revoke", {
+      access_token,
+      refresh_token,
+    })
+  }
+
+  // 删除 cookies
+  cookieStore.set("admin/auth_token", "", {
+    httpOnly: true,
+    sameSite: "strict",
+    maxAge: -1,
+  })
+  cookieStore.set("admin/auth_refresh", "", {
+    httpOnly: true,
+    sameSite: "strict",
+    maxAge: -1,
+  })
+
+  return {
+    success: true,
+    data: undefined,
+  }
+}
+
+export async function getProfile() {
+  return await callByUser<User>("/api/auth/introspect")
+}
+
 export async function refreshAuth() {
   const cookie = await cookies()
 
-  const userRefresh = cookie.get("auth_refresh")?.value
+  const userRefresh = cookie.get("admin/auth_refresh")?.value
+  console.log(userRefresh, "userRefresh")
+
   if (!userRefresh) {
     throw new Error("未授权访问")
   }
@@ -63,7 +101,7 @@ export async function refreshAuth() {
   // 处理请求
   if (!resp.success) {
     if (resp.status === 401) {
-      cookie.delete("auth_refresh")
+      cookie.delete("admin/auth_refresh")
     }
     throw new Error("未授权访问")
   }
@@ -75,12 +113,12 @@ export async function refreshAuth() {
   const expiresIn = data.expires_in
 
   // 保存令牌到 cookies
-  cookie.set("auth_token", nextAccessToken, {
+  cookie.set("admin/auth_token", nextAccessToken, {
     httpOnly: true,
     sameSite: "strict",
     maxAge: Math.max(expiresIn, 0),
   })
-  cookie.set("auth_refresh", nextRefreshToken, {
+  cookie.set("admin/auth_refresh", nextRefreshToken, {
     httpOnly: true,
     sameSite: "strict",
     maxAge: Number.MAX_SAFE_INTEGER,

src/actions/base.ts

@@ -80,7 +80,7 @@ const _callByUser = cache(
   ): Promise<ApiResponse<R>> => {
     // 获取用户令牌
     const cookie = await cookies()
-    const token = cookie.get("auth_token")?.value
+    const token = cookie.get("admin/auth_token")?.value
     if (!token) {
       return {
         success: false,

src/app/(root)/appbar.tsx

@@ -12,18 +12,16 @@ import {
 } from "lucide-react"
 import Image from "next/image"
 import Link from "next/link"
-import { usePathname } from "next/navigation"
+import { usePathname, useRouter } from "next/navigation"
 import { useEffect, useRef, useState } from "react"
+import { getProfile, logout } from "@/actions/auth"
 import { Button } from "@/components/ui/button"
 import { Input } from "@/components/ui/input"
+import type { User } from "@/models/user"
 
 export default function Appbar() {
-  const [currentUser] = useState({
-    name: "张三",
-    avatar: "/avatar.png",
-    role: "管理员",
-  })
-
+  const [currentUser, setCurrentUser] = useState<User>()
+  const router = useRouter()
   const [showDropdown, setShowDropdown] = useState(false)
   const [showNotifications, setShowNotifications] = useState(false)
   const [notifications] = useState([
@@ -116,6 +114,35 @@ export default function Appbar() {
 
   const breadcrumbs = generateBreadcrumbs()
   const unreadCount = notifications.filter(n => !n.read).length
+  const doLogout = async () => {
+    const resp = await logout()
+    if (resp.success) {
+      router.replace("/")
+      router.refresh()
+    }
+  }
+
+  useEffect(() => {
+    async function fetchUserProfile() {
+      try {
+        const resp = await getProfile()
+        console.log(resp, "resp")
+
+        if (resp.success) {
+          setCurrentUser(resp.data)
+        } else {
+          console.error("获取用户信息失败:", resp.message)
+          if (resp.status === 401) {
+            router.replace("/login")
+          }
+        }
+      } catch (error) {
+        console.error("获取用户信息时出错:", error)
+      }
+    }
+
+    fetchUserProfile()
+  }, [router])
 
   return (
     <header className="bg-white h-16 border-b border-gray-200 flex items-center justify-between px-6">
@@ -232,23 +259,45 @@ export default function Appbar() {
             aria-label="用户菜单"
           >
             <div className="h-8 w-8 rounded-full bg-blue-100 text-blue-800 flex items-center justify-center overflow-hidden border-2 border-white shadow-sm">
-              <Image
-                src={currentUser.avatar}
-                alt="用户头像"
-                width={32}
-                height={32}
-                onError={e => {
-                  const target = e.target as HTMLImageElement
-                  target.style.display = "none"
-                  target.parentElement!.innerHTML = currentUser.name.charAt(0)
-                }}
-              />
+              {currentUser ? (
+                currentUser.avatar ? (
+                  <Image
+                    src={currentUser.avatar}
+                    alt="用户头像"
+                    width={32}
+                    height={32}
+                    className="h-full w-full object-cover"
+                    onError={e => {
+                      const target = e.target as HTMLImageElement
+                      target.style.display = "none"
+                      const parent = target.parentElement
+                      if (parent && currentUser?.name) {
+                        parent.textContent = currentUser.name
+                          .charAt(0)
+                          .toUpperCase()
+                      }
+                    }}
+                  />
+                ) : (
+                  // 如果没有头像，直接显示用户名首字母
+                  <span className="text-sm font-semibold">
+                    {currentUser.name.charAt(0).toUpperCase()}
+                  </span>
+                )
+              ) : (
+                // 加载状态或用户信息为空时
+                <UserIcon size={18} />
+              )}
             </div>
             <div className="hidden md:block text-left">
-              <p className="text-sm font-medium text-gray-800">
-                {currentUser.name}
-              </p>
-              <p className="text-xs text-gray-500">{currentUser.role}</p>
+              {currentUser && (
+                <div>
+                  <p className="text-sm font-medium text-gray-800">
+                    {currentUser.name}
+                  </p>
+                  <p className="text-xs text-gray-500">{currentUser.username}</p>
+                </div>
+              )}
             </div>
             <ChevronDownIcon />
           </Button>
@@ -256,10 +305,15 @@ export default function Appbar() {
           {/* 用户下拉内容 */}
           {showDropdown && (
             <div className="absolute right-0 mt-2 w-56 bg-white rounded-lg shadow-lg py-2 z-20 border border-gray-200">
-              <div className="px-4 py-2 border-b border-gray-100 md:hidden">
-                <p className="font-medium text-gray-800">{currentUser.name}</p>
-                <p className="text-xs text-gray-500">{currentUser.role}</p>
-              </div>
+              {currentUser && (
+                <div className="px-4 py-2 border-b border-gray-100 md:hidden">
+                  <p className="font-medium text-gray-800">
+                    {currentUser.name}
+                  </p>
+
+                  <p className="text-xs text-gray-500">{currentUser.name}</p>
+                </div>
+              )}
 
               <div className="py-1">
                 <Link
@@ -284,15 +338,15 @@ export default function Appbar() {
                   <span className="pl-3">帮助中心</span>
                 </Link>
               </div>
-
-              <div className="border-t border-gray-100 mt-1">
-                <Link
-                  href="/login"
-                  className="flex items-center px-4 py-2 text-sm text-red-600 hover:bg-gray-100"
+              <div className="border-t border-gray-100 pt-1">
+                <Button
+                  variant="ghost"
+                  onClick={doLogout}
+                  className="flex items-center justify-start px-4 py-2 w-full text-sm text-red-600 hover:text-red-700 hover:bg-gray-100 font-normal"
                 >
-                  <LogOutIcon size={18} />
-                  <span className="pl-3">退出登录</span>
-                </Link>
+                  <LogOutIcon size={18} className="ml-2" />
+                  退出登录
+                </Button>
               </div>
             </div>
           )}

src/app/(root)/batch/page.tsx

@@ -9,7 +9,6 @@ export default function BatchPage() {
   const table = useDataTable<Batch>((page, size) =>
     getPageBatch({ page, size }),
   )
-  console.log(table, "table")
 
   return (
     <Suspense fallback={<div>Loading...</div>}>

src/app/(root)/billing/page.tsx

@@ -10,7 +10,6 @@ export default function BillingPage() {
   const table = useDataTable<Billing>((page, size) =>
     getPageBill({ page, size }),
   )
-  console.log(table, "table")
 
   return (
     <Suspense>
@@ -24,7 +23,6 @@ export default function BillingPage() {
             accessorKey: "info",
             cell: ({ row }) => {
               const bill = row.original
-              console.log(bill, "bill")
 
               return (
                 <div className="flex items-center gap-2">

src/app/(root)/channel/page.tsx

@@ -49,7 +49,6 @@ export default function ChannelPage() {
             header: "认证方式",
             cell: ({ row }) => {
               const channel = row.original
-              console.log(channel, "channel")
 
               const hasWhitelist =
                 channel.whitelists && channel.whitelists.trim() !== ""

src/app/(root)/security/page.tsx

@@ -0,0 +1,5 @@
+"use client"
+
+export default function SecurityPage() {
+  return <div>管理员页面待完善~</div>
+}

src/app/(root)/statistics/page.tsx

@@ -0,0 +1,5 @@
+"use client"
+
+export default function StatisticsPage() {
+  return <div>数据统计页面待完善~</div>
+}

src/app/(root)/trade/page.tsx

@@ -10,7 +10,6 @@ export default function TradePage() {
   const table = useDataTable<Trade>((page, size) =>
     getPageTrade({ page, size }),
   )
-  console.log(table, "table")
 
   return (
     <Suspense>

src/proxy.ts

@@ -19,22 +19,28 @@ export async function proxy(request: NextRequest) {
 
   // 刷新访问令牌
   try {
-    const accessToken = request.cookies.get("auth_token")
-    const refreshToken = request.cookies.get("auth_refresh")
+    const accessToken = request.cookies.get("admin/auth_token")
+    const refreshToken = request.cookies.get("admin/auth_refresh")
     if (!accessToken && !!refreshToken) {
       console.log("💡 refresh token")
       const token = await refreshAuth()
-      request.cookies.set("auth_token", token.access_token)
-      request.cookies.set("auth_refresh", token.refresh_token)
+      request.cookies.set("admin/auth_token", token.access_token)
+      request.cookies.set("admin/auth_refresh", token.refresh_token)
     }
   } catch (e) {
     console.log("刷新访问令牌失败", request.url, (e as Error).message)
   }
 
   // 验证访问令牌
-  const hasToken = !!request.cookies.get("auth_token")
-  const isToAdmin = request.nextUrl.pathname.startsWith("/admin")
-  if (!hasToken && isToAdmin) {
+  const hasToken = !!request.cookies.get("admin/auth_token")
+  // const isToAdmin = request.nextUrl.pathname.startsWith("/admin")
+  const protectedPaths = ["/", "/admin"]
+  const isProtectedPath = protectedPaths.some(
+    path =>
+      request.nextUrl.pathname === path ||
+      request.nextUrl.pathname.startsWith(`${path}/`),
+  )
+  if (!hasToken && isProtectedPath) {
     return NextResponse.redirect(
       `${request.nextUrl.origin}/login?redirect=${request.nextUrl.pathname}`,
     )