2

根据文档@auth0/nextjs-auth0，我们可以withPageAuthRequired在需要登录的页面上使用触发登录屏幕。

短变体：export const getServerSideProps = withPageAuthRequired();

但是，如果我需要getStaticProps在构建时用于预渲染页面而不能与 getServerSideProps 一起使用，该怎么办？有什么方法可以withPageAuthRequired根据请求使用静态生成的页面吗？

现在我在客户端使用双重检查来检查身份验证。但我宁愿使用服务器端检查，就像我在其他页面上使用的那样。

PS也有withPageAuthRequired在客户端使用的方法。这不适合我使用

4

1 回答 1

1

由于getStaticProps()用于构建静态页面（即，在请求时没有服务器端逻辑/呈现），因此必须在客户端进行身份验证检查和重定向到登录。

您可以通过在静态资源前面添加一个代理（例如，使用 Lambda@Edge）来获得您想要的行为，尽管我对这种方法还不是很熟悉。

从您的问题来看，您似乎已经熟悉如何在客户端进行检查/重定向，但是为了将来遇到这篇文章的其他人的利益：

要在客户端获取用户信息，请将 a 添加到您的应用程序中，然后在客户端组件中<UserProvider>调用钩子。useUser()

请参阅文档：

pages/_app.js用组件包装你的UserProvider组件：

// pages/_app.js
import React from 'react';
import { UserProvider } from '@auth0/nextjs-auth0';

export default function App({ Component, pageProps }) {
  return (
    <UserProvider>
      <Component {...pageProps} />
    </UserProvider>
  );
}

您现在可以通过检查 挂钩user返回的对象是否已定义来确定用户是否已通过身份验证。useUser()您还可以通过将用户重定向到适当的自动生成的路由来从 Next.js 应用程序的前端层登录或注销用户：

// pages/index.js
import { useUser } from '@auth0/nextjs-auth0';

export default function Index() {
  const { user, error, isLoading } = useUser();

  if (isLoading) return <div>Loading...</div>;
  if (error) return <div>{error.message}</div>;

  if (user) {
    return (
      <div>
        Welcome {user.name}!
        <a href="/api/auth/logout">Logout</a>
      </div>
    );
  }

  return <a href="/api/auth/login">Login</a>;
}

有关其他综合示例，请参阅EXAMPLES.md 文档。

withPageAuthRequired()在客户端使用的另一种方法：

import React from 'react';
import { withPageAuthRequired } from '@auth0/nextjs-auth0';

import Layout from '../components/layout';

export default withPageAuthRequired(function Profile({ user }) {
  return (
    <Layout>
      <h1>Profile</h1>
      <h4>Profile</h4>
      <pre data-testid="profile">{JSON.stringify(user, null, 2)}</pre>
    </Layout>
  );
});

从其他示例链接。

于 2021-07-16T04:42:05.573 回答