如何全域指定身份驗證而不是在Nextjs中的每個頁面上定義，我正在使用帶有反應查詢的next-auth包

現在，我在每個頁面上都使用身份驗證，但我想在 _app.tsx 檔案中全域定義它。

現在，我的組件

const Home: NextPage = () => {
  const { session, loading } = useAuth();

  
  if (!session) {
    return <UnAuthenticated />
  }

  return (
   <p>You are signed In </p>
  )
     
};

useAuth是一個提供會話物件的自定義鉤子，它使用 react-query

export function useAuth(refreshInterval?: number) {
  const { error, data } = useQuery("sessionURL", fetchSession, {
    refetchOnWindowFocus: true,
    refetchOnMount: true,
    refetchOnReconnect: true,
    refetchInterval: refreshInterval || 25000,
  });

  return {
    session: data,
    loading: typeof data === "undefined" && typeof error === "undefined",
  };
}

_app.tsx

import type { AppProps } from "next/app";
import { SessionProvider } from "next-auth/react";
import { QueryClient, QueryClientProvider } from "react-query";

function MyApp({ Component, pageProps: { session, ...pageProps } }: AppProps) {
  const queryClient = new QueryClient();

  return (
    <QueryClientProvider client={queryClient}>
      <SessionProvider session={session}>
        <Component {...pageProps} />
      </SessionProvider>
    </QueryClientProvider>
  );
}

使用這種方法，我必須在每個組件中定義未經身份驗證的路由。我想在_app.tsx中全域定義它，如下所示

import { SessionProvider } from "next-auth/react";
import { QueryClient, QueryClientProvider } from "react-query";
import { useAuth } from "../utils/Hooks";

function MyApp({ Component, pageProps: { session, ...pageProps } }: AppProps) {
  const queryClient = new QueryClient();

  const { session, loading } = useAuth();

  if (!session) {
    return <UnAuthenticated />
  }

  return (
    <QueryClientProvider client={queryClient}>
      <SessionProvider session={session}>
        <Component {...pageProps} />
      </SessionProvider>
    </QueryClientProvider>
  );
}

export default MyApp;

但問題是 useAuth 在其中使用 useQuery 并且它給出了合法的包裝錯誤。

我怎樣才能讓它作業，有什么方法可以全域定義身份驗證？？？

uj5u.com熱心網友回復：

所以我認為為此你應該創建一個包裝器組件，它自己進行檢查，然后渲染出東西，這樣你就不需要為每個頁面重復它。

// AuthWrapper.tsx

import UnAuthenticated from "./UnAuthenticated";
import useAuth from "../hooks/useAuth";
import { PropsWithChildren } from "react";

const AuthWrapper = ({ children }: PropsWithChildren<{}>) => {
  const { session, loading } = useAuth();

  if (!session) {
    return <UnAuthenticated />;
  }

  return <>{children}</>;
};

export default AuthWrapper;

然后_app.tsx像這樣使用它（感謝@Janik）你甚至可以通過使用這個小技巧來阻止某些頁面進行身份驗證

import { SessionProvider } from "next-auth/react";
import { QueryClient, QueryClientProvider } from "react-query";
import { useAuth } from "../utils/Hooks";
import { useRouter } from "next/router";
import AuthWrapper from "../components/AuthProvider";

// Pages that don't require auth
const publicPages = ["/sign-in", "/sign-up"]; // or more if you want

function MyApp({ Component, pageProps: { session, ...pageProps } }: AppProps) {
  const queryClient = new QueryClient();
  const router = useRouter();

  const isPublicPage = publicPages.includes(router.pathname);

  return (
    <QueryClientProvider client={queryClient}>
      <SessionProvider session={session}>
        {isPublicPage ? (
          <Component {...pageProps} />
        ) : (
          <AuthWrapper>
            <Component {...pageProps} />
          </AuthWrapper>
        )}
      </SessionProvider>
    </QueryClientProvider>
  );
}

export default MyApp;

標籤：反应 反应钩子 下一个.js 反应查询 下一个认证

上一篇：設計模式之：原型模式PrototypePattern的實作（淺克隆和深克隆）（淺表副本和深表副本）

下一篇：如何在React中使用Chart.js創建堆疊的水平條形圖？