如何防止直接通过url访问next js中未认证的静态页面？

Question

我只想通过单击其他页面上的按钮导航到某个页面，而不是通过在 Next JS 的浏览器中直接输入 url 路由。页面是静态的且未经身份验证。

Answer 1

为此，您必须使用 getServerSideProps。在 getServerSideProps 中，每个请求都会传递 request object。在 request object referer header 中可用，其中包含发出请求的页面地址。

注意 referer header 仅在用户通过 link 进入特定页面时可用。在搜索栏中直接输入 url 时 header 不可用。

你可以这样做：

export async function getServerSideProps ({ params , req  }) {
  const post = await githubCms.getPost(params.slug)  
  const referer  =  req.headers.referer || null
  


  return {
    props: {
      post , referer
    }
  }
}

现在您可以将 referer prop 传递给您的组件并可以更改您的渲染逻辑。

重要提示：请注意，当您刷新页面时，referer 变为 null 。所以你需要检查是否有人刷新页面逻辑或者你必须将referer存储在本地存储

如何防止直接通过url访问next js中未认证的静态页面？

How to protect to access unauthenticated static page in next js directly through url?

next.js

next-router