Добавлен компонент AuthGuard для защиты страниц от неавторизованных пользователей. Обновлен middleware для редиректа на страницу авторизации при отсутствии токена. Обернуты страницы дашборда, аккаунта, статистики и финансов в AuthGuard для проверки авторизации.

middleware.ts

@@ -5,6 +5,11 @@ export function middleware(request: NextRequest) {
   // Получаем access_token из куков (SSR)
   const token = request.cookies.get('access_token');
 
+  // Если не на /auth и нет токена, редиректим на /auth
+  if (pathname !== '/auth' && !token) {
+    return NextResponse.redirect(new URL('/auth', request.url));
+  }
+  // Если на /auth и токен есть, редиректим на главную
   if (pathname === '/auth' && token) {
     return NextResponse.redirect(new URL('/', request.url));
   }
@@ -12,5 +17,5 @@ export function middleware(request: NextRequest) {
 }
 
 export const config = {
-  matcher: ['/auth'],
+  matcher: ['/((?!_next/static|_next/image|favicon.ico).*)'],
 }; 

src/app/account/page.tsx

@@ -1,6 +1,7 @@
 "use client";
 import { useEffect, useState } from "react";
 import styles from "../../styles/dashboard.module.css";
+import AuthGuard from "../../components/AuthGuard";
 
 interface AccountData {
   id: number;
@@ -11,40 +12,42 @@ interface AccountData {
 }
 
 export default function AccountPage() {
-  const [account, setAccount] = useState<AccountData | null>(null);
+//   const [account, setAccount] = useState<AccountData | null>(null);
-  const [loading, setLoading] = useState(true);
+//   const [loading, setLoading] = useState(true);
-  const [error, setError] = useState<string | null>(null);
+//   const [error, setError] = useState<string | null>(null);
 
-  useEffect(() => {
+//   useEffect(() => {
-    fetch("/api/account")
+//     fetch("/api/account")
-      .then((res) => {
+//       .then((res) => {
-        if (!res.ok) throw new Error("Ошибка загрузки данных аккаунта");
+//         if (!res.ok) throw new Error("Ошибка загрузки данных аккаунта");
-        return res.json();
+//         return res.json();
-      })
+//       })
-      .then((data) => {
+//       .then((data) => {
-        setAccount(data);
+//         setAccount(data);
-        setLoading(false);
+//         setLoading(false);
-      })
+//       })
-      .catch((err) => {
+//       .catch((err) => {
-        setError(err.message);
+//         setError(err.message);
-        setLoading(false);
+//         setLoading(false);
-      });
+//       });
-  }, []);
+//   }, []);
 
-  if (loading) return <div className={styles.dashboard}>Загрузка...</div>;
+//   if (loading) return <div className={styles.dashboard}>Загрузка...</div>;
-  if (error) return <div className={styles.dashboard}>Ошибка: {error}</div>;
+//   if (error) return <div className={styles.dashboard}>Ошибка: {error}</div>;
-  if (!account) return <div className={styles.dashboard}>Нет данных</div>;
+//   if (!account) return <div className={styles.dashboard}>Нет данных</div>;
 
   return (
+    <AuthGuard>
       <div className={styles.dashboard}>
         <h1 className={styles.title}>Аккаунт</h1>
         <div className={styles.card} style={{ maxWidth: 400, margin: "0 auto" }}>
-        <div><b>ID:</b> {account.id}</div>
+          {/* <div><b>ID:</b> {account.id}</div>
           <div><b>Логин:</b> {account.login}</div>
           <div><b>Имя:</b> {account.name || "-"}</div>
           <div><b>Email:</b> {account.email || "-"}</div>
-        <div><b>Баланс:</b> {account.balance.toLocaleString("ru-RU", { style: "currency", currency: "RUB" })}</div>
+          <div><b>Баланс:</b> {account.balance.toLocaleString("ru-RU", { style: "currency", currency: "RUB" })}</div> */}
         </div>
       </div>
+    </AuthGuard>
   );
 } 

src/app/auth/page.tsx

@@ -14,6 +14,11 @@ export default function AuthPage() {
   const [error, setError] = useState("");
   const [loading, setLoading] = useState(false);
 
+  useEffect(() => {
+    // Удаляем токен при заходе на страницу авторизации
+    Cookies.remove('access_token', { path: '/' });
+  }, []);
+
   useEffect(() => {
     if (hasToken()) {
       window.location.href = "/";

src/app/billing/page.tsx

@@ -7,6 +7,7 @@ import BillingMetricCards from "../../components/BillingMetricCards";
 import PayoutsTransactionsTable from "../../components/PayoutsTransactionsTable";
 import BillingStatChart from "../../components/BillingStatChart";
 import DateFilters from "../../components/DateFilters";
+import AuthGuard from "../../components/AuthGuard";
 
 export default function BillingPage() {
   const [payoutForm, setPayoutForm] = useState({
@@ -36,6 +37,7 @@ export default function BillingPage() {
   }
 
   return (
+    <AuthGuard>
       <div className={styles.billingPage}>
         <h1 className={styles.title}>Финансы</h1>
         <BillingMetricCards />
@@ -60,5 +62,6 @@ export default function BillingPage() {
         />
         <PayoutsTransactionsTable filters={filters} reloadKey={reloadKey} />
       </div>
+    </AuthGuard>
   );
 } 

src/app/page.tsx

@@ -1,8 +1,8 @@
-import mockData from "../data/mockData";
+'use client'
 import MetricCards from "../components/MetricCards";
-import Table from "../components/Table";
 import StatCharts from "../components/StatCharts";
 import styles from "../styles/dashboard.module.css";
+import AuthGuard from "../components/AuthGuard";
 
 function formatCurrency(amount: number) {
   return amount.toLocaleString("ru-RU", {
@@ -14,6 +14,7 @@ function formatCurrency(amount: number) {
 
 export default function DashboardPage() {
   return (
+    <AuthGuard>
       <div className={styles.dashboard}>
         <h1 className={styles.title}>Дашборд</h1>
         <MetricCards  />
@@ -40,5 +41,6 @@ export default function DashboardPage() {
           />
         </div> */}
       </div>
+    </AuthGuard>
   );
 }

src/app/stat/page.tsx

@@ -7,6 +7,7 @@ import SalesTable from "../../components/SalesTable";
 import styles from "../../styles/stat.module.css";
 import DateInput from "../../components/DateInput";
 import DateFilters from "../../components/DateFilters";
+import AuthGuard from "../../components/AuthGuard";
 
 const tabs = [
   { id: "agents", label: "Агенты" },
@@ -32,9 +33,8 @@ export default function StatPage() {
     setReloadKey(k => k + 1);
   }
 
-
-
   return (
+    <AuthGuard>
       <div className={styles.statPage}>
         <div className={styles.headerRow}>
           <h1 className={styles.title}>Статистика и аналитика</h1>
@@ -80,5 +80,6 @@ export default function StatPage() {
           )}
         </div>
       </div>
+    </AuthGuard>
   );
 } 

src/components/AuthGuard.tsx

@@ -0,0 +1,23 @@
+"use client";
+import { useEffect, useState, ReactNode } from "react";
+import Cookies from "js-cookie";
+
+interface AuthGuardProps {
+  children: ReactNode;
+}
+
+export default function AuthGuard({ children }: AuthGuardProps) {
+  const [checked, setChecked] = useState(false);
+
+  useEffect(() => {
+    const token = Cookies.get('access_token');
+    if (!token) {
+      window.location.href = "/auth";
+    } else {
+      setChecked(true);
+    }
+  }, []);
+
+  if (!checked) return null;
+  return <>{children}</>;
+}