Tee/feat/protected route

src/app/admin/dashboard/page.tsx

@@ -3,14 +3,17 @@
 import Background from '@/components/staff/qr/background';
 import Top from './_components/top';
 import Detail from './_components/detail';
+import Protect from '@/components/protect';
 
 export default function Page() {
   return (
-    <div className="item-center relative flex min-h-screen w-full flex-col pt-8">
-      <Top />
-      <Background />
-      <div className="mt-4"></div>
-      <Detail />
-    </div>
+    <Protect roles={['admin']}>
+      <div className="item-center relative flex min-h-screen w-full flex-col pt-8">
+        <Top />
+        <Background />
+        <div className="mt-4"></div>
+        <Detail />
+      </div>
+    </Protect>
   );
 }

src/app/staff/qr/page.tsx

@@ -2,15 +2,18 @@ import Background from '@/components/staff/qr/background';
 import TopPart from '@/components/staff/qr/toppart';
 import Edit from '@/components/staff/qr/editbutton';
 import QrButton from '@/components/staff/qr/qrbutton';
+import Protect from '@/components/protect';
 export default function Home() {
   return (
     <main className="relative min-h-screen">
-      <Background />
-      <div className="relative flex flex-col items-center pt-32">
-        <TopPart />
-        <QrButton />
-        <Edit />
-      </div>
+      <Protect roles={['staff', 'admin']}>
+        <Background />
+        <div className="relative flex flex-col items-center pt-32">
+          <TopPart />
+          <QrButton />
+          <Edit />
+        </div>
+      </Protect>
     </main>
   );
 }

src/components/protect.tsx

@@ -0,0 +1,43 @@
+'use client';
+
+import { Role } from '@/const/role';
+import { useAuth } from '@/contexts/auth';
+import { useRouter } from 'next/navigation';
+import React from 'react';
+import Load from './loading/loading';
+import toast from 'react-hot-toast';
+
+interface ProtectProps {
+  roles: Role[];
+  children: React.ReactNode;
+  callBack?: string;
+}
+
+export default function Protect({
+  roles,
+  children,
+  callBack = '/',
+}: ProtectProps) {
+  const { user, isLoggingIn, isInitialized } = useAuth();
+  const router = useRouter();
+
+  if (isLoggingIn || !isInitialized) {
+    return <Loading />;
+  }
+
+  if (!user || !roles.includes(user.role)) {
+    toast.error('You cannot access this page');
+    router.push(callBack);
+    return <Loading />;
+  }
+
+  return children;
+}
+
+function Loading() {
+  return (
+    <div className="flex min-h-screen w-full items-center justify-center">
+      <Load />
+    </div>
+  );
+}

src/components/staff/qr/editbutton.tsx

@@ -5,7 +5,7 @@ import Link from 'next/link';
 export default function Edit() {
   return (
     <Link
-      href={'staff/edit'}
+      href={'/edit'}
       className="mt-6 h-12 w-72 rounded-full bg-white px-4 py-2 text-lg text-dark-pink"
     >
       <div className="flex flex-row justify-center gap-2">

src/contexts/auth.tsx

@@ -34,6 +34,7 @@ interface AuthState {
   isLoggingIn: boolean;
   isRegistering: boolean;
   isEditing: boolean;
+  isInitialized: boolean;
   login(): Promise<Result<LoginResp>>;
   edit(req: EditReq): Promise<Result<null>>;
   register(req: RegisterReq): Promise<Result<RegisterResp>>;
@@ -54,6 +55,7 @@ export default function AuthProvider({ children }: { children: ReactNode }) {
     isLoggingIn: false,
     isRegistering: false,
     isEditing: false,
+    isInitialized: false,
   });
   const { client } = useLiff();
 
@@ -71,15 +73,16 @@ export default function AuthProvider({ children }: { children: ReactNode }) {
       return { success: false, error: error };
     }
 
+    console.log('start login');
     set('isLoggingIn', true);
     const loginResp = await sendLogin(userId);
 
     if (loginResp.success) {
       set('token', loginResp.result);
-      set('isLoggedIn', true);
     } else {
       console.error('login failed:', loginResp.error);
       set('loginError', loginResp.error);
+      set('isLoggingIn', false);
       return loginResp;
     }
 
@@ -89,10 +92,11 @@ export default function AuthProvider({ children }: { children: ReactNode }) {
     } else {
       console.error('get user failed:', UserResp.error);
       set('loginError', UserResp.error);
+      set('isLoggingIn', false);
       return UserResp;
     }
 
-    set('isLoggedIn', false);
+    set('isLoggingIn', false);
 
     return {
       success: true,
@@ -136,6 +140,7 @@ export default function AuthProvider({ children }: { children: ReactNode }) {
 
   useEffect(() => {
     login();
+    set('isInitialized', true);
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);