仅在 reCaptcha 之后如何在 Next.js 中允许重定向

Question

我有一个 Next.js 应用程序，索引页面仅包含验证码，并且在成功进入后重定向到 mydomain.com/form 的表单，并且效果很好。 但我也可以在浏览器中输入

mydomain.com/form

在没有验证码的情况下使用它，这显然是我不想要的。

有没有办法限制除验证码页面重定向之外的所有条目？仅找到带有登录名的解决方案，例如我不需要的解决方案。

我正在使用 react-google-recaptcha 包

这是我的索引页

function Captcha() {
  const reRef = useRef<ReCAPTCHA>(null);
  const router = useRouter()
  return (
    <div className={styles.container}>
      <h1>Подтвердите, что вы не робот</h1>
      <ReCAPTCHA
        sitekey={`${process.env.NEXT_PUBLIC_RECAPTCHA_SITE_KEY}`}
        size="normal"
        ref={reRef}
        onChange={() => router.push('/form')}
      />
    </div>
  );
}

Answer 1

与基于认证上下文授权受限页面的逻辑相同。

在这种情况下，创建一个Context Provider，其中包含是否已完成 reCaptcha 验证的状态。然后在你的表单组件中使用useContext 来根据提供的状态进行渲染或重定向 reCaptcha 上下文

Answer 2

使用此guide 解决了它。

TL:DR 基本上我在验证码成功后将令牌添加到本地存储，令牌是访问表单页面所必需的。

创建了一个名为 withAuth 的 HOC

import { useRouter } from "next/router";
const withAuth = (WrappedComponent: any) => {
  return (props: JSX.IntrinsicAttributes) => {
    // checks whether we are on client / browser or server.
    if (typeof window !== "undefined") {
      const Router = useRouter();

      const accessToken = localStorage.getItem("accessToken");

      // If there is no access token we redirect to "/" page.
      if (!accessToken) {
        Router.replace("/");
        return null;
      }

      // If this is an accessToken we just render the component that was passed with all its props

      return <WrappedComponent {...props} />;
    }

    // If we are on server, return null
    return null;
  };
};



export default withAuth;

更改验证码页面以在每次加载时清理本地存储，并在成功进入后放入令牌。

    function Captcha() {
  const reRef = useRef<ReCAPTCHA>(null);
  const router = useRouter()
  if(process.browser){localStorage.clear()}
  
  return (
    <div className={styles.container}>
      <h1>Подтвердите, что вы не робот</h1>
      <ReCAPTCHA
        sitekey={`${process.env.NEXT_PUBLIC_RECAPTCHA_SITE_KEY}`}
        size="normal"
        ref={reRef}
        onChange={() => 
          {
            localStorage.setItem("accessToken" , "1"),
            router.push('/form')
          }
        }
      />
    </div>
  );
}

export default Captcha;

并将我的表单组件传递给 withAuth （从导出默认主页更改）

export default withAuth(Home);