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 令牌，并让 React 上下文提供程序在 API 调用中验证令牌后保存用户的状态（已登录或未登录）。

但是，我很惊讶我似乎没有使用此令牌保护 SSG 页面的好方法。推荐的方式 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，使用初始未受保护的静态数据静态生成页面的骨架，然后在刷新返回内容时对其进行补充。

这确实需要您将受保护页面的逻辑收集数据移动到 API 或 CMS 后面（任何可以清除您的权限视图的东西），并且将现有路由转换为使用 API 调用并不是一项简单的任务，所以 YMMV。

重要说明：您的重定向仍需要在客户端进行，但您可以避免向未经授权的用户显示任何受保护的内容，因为这些内容仍会受到控制在服务器级别。由于您最担心的似乎是用户主动尝试通过操纵代码来破坏内容，因此这似乎符合您的风险补救标准（他们仍然无法访问受保护的内容）。

示例页面代码：

 class Person{
    string name;
    int age;
    public:
    virtual void getdata();
    virtual void putdata();
 };
class Professor: public Person{
    static int id;
    int publications;
    int cur_id=0;
    public:
 
    Professor(){
        id++;
         cur_id = id;
  } 
};
 class Student: public Person{
     static int id;
     int cur_id=0;
     int marks[6];
     public:

     Student(){
         id++;
         cur_id = id;
}

 };
    int Professor::id=0;
    int Student::id=0;

然后，/usr/bin/ld: ./ccX3aCPD.o: in function 'main': /tmp/submission/20210330/16/49/hackerrank-4b8371377ef048da18dff14fc295fdf8/code/Solution.cpp:64: undefined reference to Student::id' /usr/bin/ld: /tmp/submission/20210330/16/49/hackerrank-4b8371377ef048da18dff14fc295fdf8/code/Solution.cpp:64: undefined reference to Student::id' /usr/bin/ld: /tmp/submission/20210330/16/49/hackerrank-4b8371377ef048da18dff14fc295fdf8/code/Solution.cpp:36: undefined reference to Professor::id' /usr/bin/ld: /tmp/submission/20210330/16/49/hackerrank-4b8371377ef048da18dff14fc295fdf8/code/Solution.cpp:36: undefined reference to Professor::id' /usr/bin/ld: ./ccX3aCPD.o:(.rodata._ZTI9Professor[_ZTI9Professor]+0x10): undefined reference to `typeinfo for Person' /usr/bin/ld: ./ccX3aCPD.o:(.rodata._ZTI7Student[_ZTI7Student]+0x10): undefined reference to `typeinfo for Person' collect2: error: ld returned 1 exit status 处的示例 API 实现：

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>
}

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

1 个答案: