禁止导航到某些页面/路线

Question

我有一个想限制一些导航的Next.js（修复程序可能与Next.js无关）。 Next.js文档中的This page提到“您应该防止导航到不希望通过编程的路线”，但是我不确定如何执行此操作。假设我有以下页面：

/bikes
/boats
/cars

，我只想允许用户看到/bikes。我将如何做到这一点。我能够从不希望的页面重定向到可接受的页面，但是只有在不希望的页面加载之后。在此之前是否可以重定向（也许通过在更改URL后立即更改URL）？

Answer 1

我很欣赏这是一个老问题，但是，我希望我比我更早知道这个答案，所以我想回答它作为记录。

我们的 next.js 应用程序有一组相对复杂的权限，与访问每个页面相关联（具有访问页面的能力，或者页面上显示的不同数据），基于用户的身份验证状态以及授权范围授予他们。

我们使用的解决方案是从 getServerSideProps() 返回重定向。通常会返回如下内容：

const getServerSideProps = (context) => {
  return {
    props: {
      myProp: 1
    }
  };
}

但是，也可以返回重定向。此重定向在服务器端执行之前页面内容发送到浏览器：

const getServerSideProps = (context) => {
  return {
    redirect: '/login'
  };
}

这是一个相对较新的功能 - 它是在去年年底才推出的，并且没有太多相关文档，但它完美地服务于这个用例。