security - Next.js 保护使用静态站点生成的路由

Question

在 Next.js 中，您可以选择 server side rendering (SSR)或 static site generation (SSG) .全程Next.js docs和 community ，出于性能原因，建议使用 SSG 而非 SSR。
我有一个 Next.js 构建，它在整个应用程序中使用 SSG，使用 getStaticProps()等通过与外部 CMS (Prismic) 集成在构建时生成内容/页面。我更喜欢这个，因为如前所述，它提供了性能提升，而且大多数代码库然后可以使用相同的数据获取策略(在构建时)。
然而，其中一些页面需要保护 - 意味着它们只能由经过身份验证的用户访问。我们正在使用 Auth0 生成 JWT token ，并在 API 调用中验证 token 后让 React 上下文提供程序保存用户的状态(已登录或未登录)。
但是，我很震惊我似乎没有保护 SSG 页面的好方法 有了这个 token 。推荐方式 here 让我觉得很奇怪，因为据我所知，这是一个可以由客户端操纵的客户端重定向(例如 - 客户端可以操纵它的本地状态/上下文，或者篡改从 notloggedincondition 返回的任何内容)显示静态内容或以其他方式使重定向短路。
作为引用，这是该代码的粘贴:

import {useEffect} from 'react'
import {useRouter} from 'next/router'
export async function getStaticProps() {
  return {
    props: {
      hello: 'Hello World'
    }
  }
}

export default (props) => {
  const router = useRouter()
  useEffect(() => {
    if(notloggedincondition) {
      router.push('/login')
    }
  }, [])

  return <h1>Rest of the page</h1>
}

请注意 <h1>Rest of the page</h1>仍然可以通过操纵客户端来访问......所以我想在请求/响应级别保护 SSG 并执行服务器端重定向(如果需要)，或类似的东西。
缺少类似 this 的东西，有没有办法在不依赖客户端路由的情况下安全地保护 SSG 页面？我是否需要对内容进行 SSR，即使它与其他内容实际上没有什么不同，除了只有经过身份验证的用户才能看到它的要求？
也许我遗漏了一些明显的东西，但在我看来，即使使用静态站点，也应该有一种方法可以在不依赖客户端路由的情况下保护它。也就是说，每个页面都必须公开的静态生成站点的概念似乎并不是固有的，所以我想知道在 Next.js 中是否有一种安全的方法可以做到这一点。

Answer 1

我能找到的最好的方法是通过 SWR fetches ，如果刷新返回内容，则使用初始未 protected 静态数据静态生成页面的骨架，然后通过刷新对其进行补充。
这确实需要您将 protected 页面的逻辑收集数据移动到 API 或 CMS 后面(任何可以清除您的权限 View 的东西)，并且将现有路由转换为使用 API 调用并不是一项简单的任务，因此 YMMV。
重要提示:您的重定向仍然需要在客户端进行，但您可以避免向未经授权的用户显示任何 protected 内容，因为这些内容仍会在服务器级别进行控制。由于您最担心的似乎是用户主动尝试通过操纵代码来破坏内容，因此这似乎符合您的风险补救标准(他们仍然无法访问 protected 内容)。
示例页面代码:

import {useEffect} from 'react'
import {useRouter} from 'next/router'
import useSWR from 'swr'

export async function getStaticProps() {
  return {
    props: {
      hello: 'Hello World'
    }
  }
}

export default (props) => {
  const router = useRouter()

  // Access the protected content via an API route, 
  // provide the initial unprotected static content via the initialData param
  const { data } = useSWR('/api/protected-content', fetcher, { initialData: props })

  useEffect(() => {
    if(notloggedincondition) {
      router.push('/login')
    }
  }, [])

  return <h1>{ data.hello }</h1>
}

然后，在 pages/api/protected-content 处的示例 API 实现:

export default async function ProtectedContent(req, res) {
  // Get a session object based on request cookies
  let session = await initUserSession(req, res);

  // If a session is available, return the protected content
  if (session.props.userSession) {
    return res.status(200).json({hello: 'This is protected content'});
  } else {
    return res.status(401).send("UNAUTHENTICATED");
  }
}