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

【问题标题】：How to protect to access unauthenticated static page in next js directly through url?如何保护通过url直接访问next js中未经身份验证的静态页面？
【发布时间】：2021-11-17 10:21:35
【问题描述】：

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

【问题讨论】：

因此您希望仅允许经过身份验证的用户导航到页面并限制未经授权的用户直接输入 url 。对吗？
经过身份验证或未经身份验证我希望他们不能通过 url 访问页面，而只能通过单击其他页面上的按钮

标签： next.js next-router

【解决方案1】：

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

注意 referer 标头仅在用户通过链接进入特定页面时可用。直接在搜索栏中输入 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 属性传递给您的组件，并可以更改您的渲染逻辑。

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

【讨论】：