Next.js 客户端保护路由，无需服务器端渲染答案

【问题标题】：Next.js client side protected routes without server side renderingNext.js 客户端保护路由，无需服务器端渲染
【发布时间】：2021-08-27 05:56:15
【问题描述】：

我对 next.js 中的受保护路由有点困惑。

首先，我不想使用任何服务器端渲染。我想静态导出通过next export。在这种情况下，我该如何实现客户端受保护的路由？

假设，我有一个带有基本 JWT 身份验证的后端服务器。如何使某些路由免受某些用户的影响并在/login页面中重定向它们？

【问题讨论】：

这是否接近您想要实现的目标？ stackoverflow.com/questions/63251020/…
我的理解可能有误，但在第一个答案中，作者使用了next-auth，也使用了/api，我只想像典型的create-react-app一样静态导出我的网站IE。没有附加任何服务器。我想使用自己的后端服务器。

标签： reactjs authentication next.js url-routing

【解决方案1】：

由于您希望使用静态导出创建受保护的路由，因此您需要在浏览器中完成所有操作。

在浏览器中验证他们的 JWT
如果他们的 JWT 有效，则呈现页面（包括所有获取数据的请求）
如果他们的 JWT 无效，请重定向他们

为此，我们将创建一个包装器AuthCheck 组件。

授权检查

为了验证 JWT，您可以使用任何您喜欢的方法，包括将其发送到 api 端点以进行验证。虽然我不确定您是否可以将 Next.js api 端点与静态导出一起使用。

import { useRouter } from 'next/router'

export const AuthCheck = (props) => {
  const router = useRouter()
  const isJWTValid = useIsJWTValid() // you need to implement this. In this example, undefined means things are still loading, null means user is not signed in, anything truthy means they're signed in

  if (typeof window !== 'undefined' && user === null) router.push('/')

  if(!user) return <Loading /> // a loading component that prevents the page from rendering
   
  return props.children
}

然后您可以将其添加到您的 app.js。

const MyApp = ({ Component, pageProps }) => {
  return (
    <AuthCheck>
      <Component {...pageProps} />
    </AuthCheck>
  )
}

export default MyApp

或者，您也可以将其添加到任何单独的页面。有了这个，您可能需要调试任何获取数据的时间。

export default const ProtectedPage = () => {
  return (
    <AuthCheck>
      <!-- contents of the page -->
    </AuthCheck>
  )
}

【讨论】：