阻止导航到某些页面/路线答案

【问题标题】：Prevent navigation to certain pages/routes阻止导航到某些页面/路线
【发布时间】：2020-01-15 13:52:10
【问题描述】：

我有一个 Next.js（修复可能不一定与 Next.js 有任何关系）应用程序，我想限制一些导航。 This page 在 Next.js 文档中提到“你应该防止导航到你不想要的路线”，但我不确定如何做到这一点。假设我有以下页面：

/bikes
/boats
/cars

我只想让用户看到/bikes。我怎么能做到这一点。我能够从不需要的页面重定向到可接受的页面，但只有在不需要的页面加载之后。有没有办法在此之前重定向（也许通过在更改 URL 后立即更改）？

【问题讨论】：

在文档中有很好的解释：使用useFileSystemPublicRoutes禁用文件系统路由（SSR），在客户端使用Router.beforePopState。
我猜如果你禁用文件系统路由，你需要一个自定义服务器。
我设法通过使用自定义服务器来完成这项工作。
我通过修改_document.tsx 并在getInitialProps 函数中添加一些控制流来实现这一点。对于我的大部分私有路由逻辑，我不需要访问数据库，我只需要验证 cookie 的存在。如果您确实需要访问数据库进行身份验证，它可能会显着减慢您的页面加载速度。

【解决方案1】：

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

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

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

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

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

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

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

【讨论】：