Есть ли способ передать мою константу middleware.ts, которая проверяет, вошел ли пользователь в другой API, логику домена или page.tsx? (также открыт для новых предложений)

Я пытаюсь создать функцию аутентификации для своего веб-приложения, следуя этому онлайн-руководству.

Я создал middleware.ts для своего веб-приложения и увидел, что там есть const isLoggedIn, поэтому подумал, что могу использовать это логическое значение на всех остальных страницах для постоянной аутентификации, если пользователь вошел в систему.

поэтому я абстрагировал это вот так

export const checkIsLoggedIn = (req: any): boolean => {
    return !!req.auth;
};

поскольку это промежуточное программное обеспечение, которое представляет собой действие сервера, а все мои компоненты — это действия клиента, я решил создать API, чтобы checkisloggedin передавался из middleware.ts -> check-auth.ts (api) -> main-nav .tsx (компонент, который я хочу использовать, чтобы проверить, вошел ли пользователь в систему).

но когда я console.info, чтобы проверить, работает ли мой API, консоль элемента проверки моего браузера вернула эту ошибку

[main-nav-tsx][checkAuthStatus]: Error fetching auth status 
SyntaxError: Unexpected token '<', "<!DOCTYPE "... is not valid JSON
window.console.error    @   app-index.js:33

Видимо, это означало, что мой маршрут API не найден.

Проблема: я не уверен, как еще я могу передать логическое значение checkisloggedin своим компонентам, поскольку каждый метод, который я пытался проверить, вошел ли пользователь в систему, не работает. все мои каталоги тоже казались правильными.

Ожидаемый результат: мне просто нужен способ проверить, вошел ли пользователь в систему, и при необходимости отобразить кнопку выхода.

Я также открыт для новых решений, связанных с сеансами и токенами, но понятия не имею, как их использовать.

Это мои коды. Поскольку NextJS уделяет особое внимание файловым каталогам, я прокомментировал, где хранится каждый файл, в самом верху.

// src/middleware.ts

// import { auth } from "./auth"
import authConfig from "./auth.config"
import NextAuth from "next-auth"
import {
    DEFAULT_LOGIN_REDIRECT,
    apiAuthPrefix,
    authRoutes,
    publicRoutes,
} from "@/routes"
import { NextResponse } from "next/server";

const { auth } = NextAuth(authConfig);

export const checkIsLoggedIn = (req: any): boolean => {
    return !!req.auth;
};

export default auth((req) => {
    const { nextUrl } = req;
    const isLoggedIn = !!req.auth;
    console.info('[middleware-ts][checkisloggedin]: ', checkIsLoggedIn(req));
    console.info('[middleware-ts][isloggedin]: ', isLoggedIn);
    const isApiAuthRoute = nextUrl.pathname.startsWith(apiAuthPrefix);
    const isPublicRoute = publicRoutes.includes(nextUrl.pathname);
    const isAuthRoute = authRoutes.includes(nextUrl.pathname);

    if (isApiAuthRoute) {
        return NextResponse.next();
    }

    if (isAuthRoute) {
        if (isLoggedIn) {
            return NextResponse.redirect(new URL(DEFAULT_LOGIN_REDIRECT, nextUrl))
        }
        return NextResponse.next();
    }

    if (!isLoggedIn && !isPublicRoute) {
        return NextResponse.redirect(new URL("/auth/login", nextUrl));
    }
    return NextResponse.next();
})

export const config = {
    // matcher: ["/((?!api|_next/static|_next/image|favicon.ico).*)"],
    // matcher: ["/auth/login", "/auth/register"],
    matcher: ['/((?!.*\\..*|_next).*)', '/', '/(api|trpc)(.*)'],
} 

// src/components/main-nav.tsx

"use client"

import * as React from "react"
import Link from "next/link"
import { usePathname } from "next/navigation"
import { docsConfig } from "@/config/docs"
import { siteConfig } from "@/config/site"
import { cn } from "@/lib/utils"
import { Icons } from "@/components/icons"
import { signOut } from "@/auth"

export function MainNav() {
    const pathname = usePathname()

    const [isLoggedIn, setIsLoggedIn] = React.useState(false);

    React.useEffect(() => {
        const checkAuthStatus = async () => {
            console.info('[main-nav-tsx][checkAuthStatus]: Checking auth status...');
            try {
                const response = await fetch('/app/api/authentication/check-auth');
                if (response.ok) {
                    const data = await response.json();
                    console.info('[main-nav-tsx][checkAuthStatus]: Auth status response:', data);
                    setIsLoggedIn(data.isLoggedIn);
                } else {
                    console.error('[main-nav-tsx][checkAuthStatus]: Error fetching auth status', response.status);
                }
            } catch (error) {
                console.error('[main-nav-tsx][checkAuthStatus]: Error fetching auth status', error);
            }
        }

        checkAuthStatus();
    }, []);

    /**
     * handleSignOut is a server side action to check for log in 
     * main-nav is a client side action 
     * even though the method is post, we cannot use server action for checking if logged in is true or false
     * hence a POST api is needed
     */
    const handleSignOut = async () => {
        const response = await fetch('/app/api/authentication/signout', {
            method: 'POST',
        });
        if (response.ok) {
            // Handle successful sign-out, e.g., redirect or update state
            setIsLoggedIn(false);
        } else {
            // Handle error
            console.error('Error signing out');
        }
    };

    return (
        <div className = "mr-4 hidden md:flex">
            <Link href = "/" className = "mr-6 flex items-center space-x-2">
                <Icons.logo className = "h-6 w-6" />
                <span className = "hidden font-bold sm:inline-block">
                    {siteConfig.name}
                </span>
            </Link>
            <nav className = "flex items-center gap-4 text-sm lg:gap-6">
                {docsConfig.mainNav?.map(item => (
                    item.href && (
                        <Link
                            key = {item.href}
                            href = {item.href}
                            className = {cn(
                                "transition-colors hover:text-foreground/80",
                                pathname === item.href ? "text-foreground" : "text-foreground/60"
                            )}
                        >
                            {item.title}
                        </Link>
                    )
                ))}

                {/* change this button else where */}
                {isLoggedIn && (
                    <button onClick = {handleSignOut}>Sign Out</button>
                )}

            </nav>
        </div>
    )
}

// src/app/api/authentication/check-auth.ts

import { NextApiRequest, NextApiResponse } from 'next'
import { checkIsLoggedIn } from '../../../middleware'

export default function handler(req: NextApiRequest, res: NextApiResponse) {
    const isLoggedIn = checkIsLoggedIn(req);
    // console.info("[check-auth-ts]: ", isLoggedIn)
    res.status(200).json({ isLoggedIn });
}