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

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

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

在这种情况下，创建一个上下文提供程序，其中包含是否完成了reCaptcha验证的状态。然后在表单组件中使用useContext，根据控件提供的状态进行呈现或重定向reCaptcha上下文

Answer 2

使用本指南解决。

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;

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

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