next.js - 如何保护通过url直接访问next js中未经身份验证的静态页面？

Question

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

Answer 1

要实现这一点，您必须使用getServerSideProps. 在每个请求上传递getServerSideProps一个对象。request在request对象referer 标头中可用，其中包含发出请求的页面的地址。

请注意referer，仅当用户通过链接进入特定页面时，标题才可用。直接在搜索栏中输入 url 时，标题不可用。

你可以这样做：

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


  return {
    props: {
      post , referer
    }
  }
}

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

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