实现权限级菜单、localStorageSWR缓存

tone-page-web/app/console/(with-menu)/layout.tsx

@@ -25,29 +25,52 @@ export default function ConsoleMenuLayout({
 
     const router = useRouter();
 
+
+    const getInitialData = () => {
+        if (!window || !window.localStorage) return null;
+        const cache = localStorage.getItem(USER_ME_CACHE_KEY);
+        if (!cache) return;
+        try {
+            const user = JSON.parse(cache);
+            if (!user || !user.userId) throw new Error();
+            return user;
+        } catch (error) {
+            localStorage.removeItem(USER_ME_CACHE_KEY);
+        }
+        return undefined;
+    }
+
+    const USER_ME_CACHE_KEY = 'user-me-cache';
     const { data: user, isLoading, error } = useSWR(
         '/api/user/me',
-        () => UserApi.me(),
+        async () => {
+            const data = await UserApi.me();
+            localStorage.setItem(USER_ME_CACHE_KEY, JSON.stringify(data));
+            return data;
+        },
         {
             onError: (error) => {
                 if (error.statusCode === 401) {
                     localStorage.removeItem('token');
+                    localStorage.removeItem(USER_ME_CACHE_KEY);
                     toast.info('登录凭证已失效，请重新登录');
                     router.replace('/console/login');
                 }
-            }
+            },
+            fallbackData: getInitialData(),
+            revalidateIfStale: false,
+            revalidateOnFocus: false,
+            revalidateOnReconnect: false,
         }
     );
 
     if (!isLoading && !error && !user) {
         router.replace('/console/login');
         localStorage.removeItem('token');
+        localStorage.removeItem(USER_ME_CACHE_KEY);
         toast.error('账户状态异常，请重新登录');
     }
 
-
-
-
     return (
         <SidebarProvider>
             <AppSidebar user={user} isUserLoading={isLoading} />

tone-page-web/components/app-sidebar.tsx

@@ -25,8 +25,10 @@ import {
 } from "@/components/ui/sidebar"
 import Link from "next/link"
 import { User } from "@/lib/types/user"
-// This is sample data.
-const data = {
+import { Role } from "@/lib/types/role"
+
+export function AppSidebar({ user, isUserLoading, ...props }: React.ComponentProps<typeof Sidebar> & { user: User | undefined, isUserLoading: boolean }) {
+  const data = {
     user: {
       name: "shadcn",
       email: "m@example.com",
@@ -37,6 +39,7 @@ const data = {
         title: "网站管理",
         url: "/console/web",
         icon: SquareTerminal,
+        isHidden: !user?.roles.includes(Role.Admin),
         items: [
           {
             title: "资源",
@@ -52,6 +55,7 @@ const data = {
         title: "用户管理",
         url: "/console/user/list",
         icon: UsersRound,
+        isHidden: !user?.roles.includes(Role.Admin),
       },
       {
         title: "邮件系统",
@@ -72,8 +76,9 @@ const data = {
           },
           {
             title: "邮件管理",
-          url: "/console/mail/manage"
-        }
+            url: "/console/mail/manage",
+            isHidden: !user?.roles.includes(Role.Admin),
+          },
         ],
       },
       {
@@ -97,9 +102,8 @@ const data = {
         icon: Undo2,
       },
     ],
-}
+  }
 
-export function AppSidebar({ user, isUserLoading, ...props }: React.ComponentProps<typeof Sidebar> & { user: User | undefined, isUserLoading: boolean }) {
   return (
     <Sidebar collapsible="icon" {...props}>
       <SidebarHeader>

tone-page-web/components/nav-main.tsx

@@ -29,9 +29,11 @@ export function NavMain({
     url: string
     icon?: LucideIcon
     isActive?: boolean
+    isHidden?: boolean
     items?: {
       title: string
       url: string
+      isHidden?: boolean
     }[]
   }[]
 }) {
@@ -39,7 +41,7 @@ export function NavMain({
     <SidebarGroup>
       <SidebarGroupLabel>菜单</SidebarGroupLabel>
       <SidebarMenu>
-        {items.map((item) => (
+        {items.filter(i => !i.isHidden).map((item) => (
           (item.items && item.items.length > 0)
             ? (
               <Collapsible
@@ -58,7 +60,7 @@ export function NavMain({
                   </CollapsibleTrigger>
                   <CollapsibleContent>
                     <SidebarMenuSub>
-                      {item.items?.map((subItem) => (
+                      {item.items.filter(i => !i.isHidden).map((subItem) => (
                         <SidebarMenuSubItem key={subItem.title}>
                           <SidebarMenuSubButton asChild>
                             <Link href={subItem.url}>

tone-page-web/lib/types/role.ts

@@ -0,0 +1,3 @@
+export enum Role {
+    Admin = 'admin',
+}

tone-page-web/lib/types/user.ts

@@ -1,3 +1,5 @@
+import { Role } from "./role";
+
 export interface User {
     userId: string;
     username: string;
@@ -8,4 +10,5 @@ export interface User {
     createdAt: string;
     updatedAt: string;
     deletedAt: string | null;
+    roles: Role[];
 }