文章/答案/技术大牛

发布

社区首页 >问答首页 >如何在全局范围内指定身份验证，而不是在下一个js中的每个页面上定义身份验证，我使用的是具有react查询的next-auth包。

问如何在全局范围内指定身份验证，而不是在下一个js中的每个页面上定义身份验证，我使用的是具有react查询的next-auth包。
EN

Stack Overflow用户

提问于 2022-04-02 13:46:31

回答 1查看 827关注 0票数 2

现在，我正在每个页面上使用身份验证，但我想在_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，它给出了包装错误，这是合法的。

我如何使它工作，有任何方法我可以定义身份验证全球？

reactjs

react-hooks

next.js

react-query

next-auth

回答 1

Stack Overflow用户

回答已采纳

发布于 2022-04-02 14:21:46

为此，您应该创建一个包装器组件，对它自己进行检查，然后将其呈现出来，这样您就不需要在每个页面上重复它了。

// 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;

票数 2

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/71718085

复制

相似问题

问如何在全局范围内指定身份验证，而不是在下一个js中的每个页面上定义身份验证，我使用的是具有react查询的next-auth包。
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在全局范围内指定身份验证，而不是在下一个js中的每个页面上定义身份验证，我使用的是具有react查询的next-auth包。EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在全局范围内指定身份验证，而不是在下一个js中的每个页面上定义身份验证，我使用的是具有react查询的next-auth包。
EN