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

Question

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

mydomain.com/form

无需验证码即可访问，这显然是我不想要的。

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

我正在使用 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 that contains the state whether reCaptcha validation has been done. Then use 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);