refactor: prevent using middleware to improve static route

Author: pan93412

app/(admin)/layout.tsx

@@ -1,5 +1,6 @@
 import { AppSidebar } from "@/components/app-sidebar";
 import { SidebarInset, SidebarProvider } from "@/components/ui/sidebar";
+import ProtectedRoute from "@/providers/use-protected-route";
 import { unstable_ViewTransition as ViewTransition } from "react";
 
 export default function AdminLayout({
@@ -8,20 +9,22 @@ export default function AdminLayout({
   children: React.ReactNode;
 }>) {
   return (
-    <SidebarProvider
-      style={{
-        "--sidebar-width": "calc(var(--spacing) * 72)",
-        "--header-height": "calc(var(--spacing) * 12)",
-      } as React.CSSProperties}
-    >
-      <AppSidebar variant="inset" />
-      <SidebarInset>
-        <ViewTransition>
-          <div suppressHydrationWarning>
-            {children}
-          </div>
-        </ViewTransition>
-      </SidebarInset>
-    </SidebarProvider>
+    <ProtectedRoute>
+      <SidebarProvider
+        style={{
+          "--sidebar-width": "calc(var(--spacing) * 72)",
+          "--header-height": "calc(var(--spacing) * 12)",
+        } as React.CSSProperties}
+      >
+        <AppSidebar variant="inset" />
+        <SidebarInset>
+          <ViewTransition>
+            <div suppressHydrationWarning>
+              {children}
+            </div>
+          </ViewTransition>
+        </SidebarInset>
+      </SidebarProvider>
+    </ProtectedRoute>
   );
 }

app/forbidden.tsx

@@ -0,0 +1,10 @@
+import ForbiddenLayout from "@/components/forbidden-layout/page";
+import type { Metadata } from "next";
+
+export const metadata: Metadata = {
+  title: "權限不足",
+}
+
+export default function ForbiddenPage() {
+  return <ForbiddenLayout />;
+}

app/unauthorized.tsx

@@ -0,0 +1,5 @@
+import { redirect } from "next/navigation";
+
+export default async function UnauthorizedPage() {
+  redirect("/login");
+}

app/forbidden/page.tsx components/forbidden-layout/page.tsxapp/forbidden/page.tsx renamed to components/forbidden-layout/page.tsx

@@ -1,19 +1,11 @@
 import { Logo } from "@/components/logo";
 import { Button } from "@/components/ui/button";
 import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card";
-import { redirectIfAuthenticated } from "@/lib/auth.rsc";
 import { AlertTriangle } from "lucide-react";
 import Link from "next/link";
 import { UserInfo } from "./user-info";
 
-import type { Metadata } from "next";
-export const metadata: Metadata = {
-  title: "權限不足",
-};
-
-export default async function ForbiddenPage() {
-  await redirectIfAuthenticated();
-
+export default async function ForbiddenLayout() {
   return (
     <div
       className={`

app/forbidden/user-info.tsx components/forbidden-layout/user-info.tsxapp/forbidden/user-info.tsx renamed to components/forbidden-layout/user-info.tsx

@@ -4,7 +4,7 @@ import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/com
 import { cn } from "@/lib/utils";
 import { AlertCircle, CheckCircle } from "lucide-react";
 
-interface LoginFormProps extends React.ComponentProps<"div"> {
+export interface LoginFormProps extends React.ComponentProps<"div"> {
   error?: string;
   errorDescription?: string;
   message?: string;

components/login-form.tsx

@@ -11,6 +11,7 @@ const nextConfig: NextConfig = {
     ],
     ppr: "incremental",
     turbopackPersistentCaching: true,
+    authInterrupts: true,
   },
 };
 

middleware.ts

@@ -0,0 +1,21 @@
+"use server";
+
+import { getAuthStatus, getAuthToken } from "@/lib/auth";
+import { forbidden, unauthorized } from "next/navigation";
+
+export default async function ProtectedRoute({ children }: { children: React.ReactNode }) {
+  const token = await getAuthToken();
+  if (!token) {
+    unauthorized();
+  }
+
+  const { loggedIn, role } = await getAuthStatus(token);
+  if (!loggedIn) {
+    unauthorized();
+  }
+  if (role !== "admin") {
+    forbidden();
+  }
+
+  return children;
+}