如何保护 Next.js next-auth 中的路由？

我正在尝试将身份验证与next-auth应用程序中的库。我一直在遵循这里给出的官方教程https://github.com/nextauthjs/next-auth-example/ https://github.com/nextauthjs/next-auth-example/。给定示例的问题是我需要检查每个页面上是否有一个需要这样身份验证的会话。

    import { useState, useEffect } from 'react';
    import { useSession } from 'next-auth/client'
    
    export default function Page () {
      const [ session, loading ] = useSession()
      
      // Fetch content from protected route
      useEffect(()=>{
        const fetchData = async () => {
          const res = await fetch('/api/examples/protected')
          const json = await res.json()
        }
        fetchData()
      },[session])
    
      // When rendering client side don't display anything until loading is complete
      if (typeof window !== 'undefined' && loading) return null
    
      // If no session exists, display access denied message
      if (!session) { return  <Layout><AccessDenied/></Layout> }
    
      // If session exists, display content
      return (
        <Layout>
          <h1>Protected Page</h1>
          <p><strong>{content || "\u00a0"}</strong></p>
        </Layout>
      )
    }

或者像这样进行服务器端检查

    import { useSession, getSession } from 'next-auth/client'
    import Layout from '../components/layout'
    
    export default function Page () {
      // As this page uses Server Side Rendering, the `session` will be already
      // populated on render without needing to go through a loading stage.
      // This is possible because of the shared context configured in `_app.js` that
      // is used by `useSession()`.
      const [ session, loading ] = useSession()
    
      return (
        <Layout>
          <h1>Server Side Rendering</h1>
          <p>
            This page uses the universal <strong>getSession()</strong> method in <strong>getServerSideProps()</strong>.
          </p>
          <p>
            Using <strong>getSession()</strong> in <strong>getServerSideProps()</strong> is the recommended approach if you need to
            support Server Side Rendering with authentication.
          </p>
          <p>
            The advantage of Server Side Rendering is this page does not require client side JavaScript.
          </p>
          <p>
            The disadvantage of Server Side Rendering is that this page is slower to render.
          </p>
        </Layout>
      )
    }
    
    // Export the `session` prop to use sessions with Server Side Rendering
    export async function getServerSideProps(context) {
      return {
        props: {
          session: await getSession(context)
        }
      }
    }

这是很多令人头痛的事情，因为我们需要在每个需要身份验证的页面上手动进行正确操作，有没有办法全局检查给定的路由是否受保护，如果未登录则重定向，而不是在每个页面上都写这个？

是的，您需要检查每个页面，并且您的逻辑没问题（显示微调器，直到 oauth 状态可用），但是，您可以lift身份验证状态已启动，因此您无需重复auth每个页面的代码，_app组件是一个完美的地方，因为它自然地包装了所有其他组件（页面）。

      <AuthProvider>
        {/* if requireAuth property is present - protect the page */}
        {Component.requireAuth ? (
          <AuthGuard>
            <Component {...pageProps} />
          </AuthGuard>
        ) : (
          // public page
          <Component {...pageProps} />
        )}
      </AuthProvider>

AuthProvider组件包装了用于设置第三方提供商的逻辑（Firebase、AWS Cognito、Next-Auth）

AuthGuard是您放置的组件授权检查逻辑。你会注意到AuthGuard正在包裹着Component（这是实际的page在 Next.js 框架中）。所以AuthGuard将显示loading查询 auth 提供者时的指示器，如果 auth 为 true 它将显示Component如果 auth 为 false，它可能会显示登录弹出窗口或重定向到登录页面。

About Component.requireAuth这是一个方便的属性，可以在每个页面上设置来标记Component需要 auth，如果该 prop 为 falseAuthGuard永远不会被渲染。

我已经更详细地描述了这种模式：保护 Next.js 应用程序中的静态页面 https://dev.to/ivandotv/protecting-static-pages-in-next-js-application-1e50

我还做了一个示例演示应用程序（来源） https://github.com/ivandotv/nextjs-client-signin-logic