Next.js教程:验证

身份验证可验证用户身份,而授权则可控制用户可以访问的内容。Next.js支持多种身份验证模式,每种模式都针对不同的用例而设计。该页面将介绍每种情况,以便您可以根据自己的限制进行选择。

认证方式

识别所需身份验证模式的第一步是了解所需的数据获取策略。然后,我们可以确定哪些身份验证提供程序支持此策略。主要有两种模式:

  • 使用静态生成在服务器端呈现加载状态,然后从客户端获取用户数据。
  • 在服务器端获取用户数据,以消除未认证内容的闪烁。

验证静态生成的页面

如果没有阻塞数据要求,那么Next.js会自动确定页面是静态的。这意味着页面中没有getServerSidePropsgetInitialProps。相反,您的页面可以从服务器呈现加载状态,然后获取用户客户端。

这种模式的优点之一是,它允许从全局CDN提供页面并使用进行预加载next/link。实际上,这导致更快的TTI(互动时间)。

让我们看一下个人资料页面的示例。最初将呈现一个加载骨骼。对用户的请求完成后,将显示用户名:

// pages/profile.js

import useUser from '../lib/useUser'
import Layout from '../components/Layout'

const Profile = () => {
  // Fetch the user client-side
  const { user } = useUser({ redirectTo: '/login' })

  // Server-render loading state
  if (!user || user.isLoggedIn === false) {
    return <Layout>Loading...</Layout>
  }

  // Once the user request finishes, show the user
  return (
    <Layout>
      <h1>Your Profile</h1>
      <pre>{JSON.stringify(user, null, 2)}</pre>
    </Layout>
  )
}

export default Profile

您可以在此处查看此示例的实际操作。查看with-iron-session示例以了解其工作原理。

验证服务器渲染的页面

如果导出从页面async调用的函数getServerSideProps,则Next.js将使用所返回的数据在每个请求上预呈现此页面getServerSideProps

export async function getServerSideProps(context) {
  return {
    props: {}, // Will be passed to the page component as props
  }
}

让我们将配置文件示例转换为使用服务器端渲染。如果有会话,请user作为道具返回Profile页面中的组件。请注意,此示例中没有加载框架。

// pages/profile.js

import withSession from '../lib/session'
import Layout from '../components/Layout'

export const getServerSideProps = withSession(async function ({ req, res }) {
  // Get the user's session based on the request
  const user = req.session.get('user')

  if (!user) {
    return {
      redirect: {
        destination: '/login',
        permanent: false,
      },
    }
  }

  return {
    props: { user },
  }
})

const Profile = ({ user }) => {
  // Show the user. No loading state is required
  return (
    <Layout>
      <h1>Your Profile</h1>
      <pre>{JSON.stringify(user, null, 2)}</pre>
    </Layout>
  )
}

export default Profile

这种模式的优点是可以防止重定向前未经身份验证的内容闪烁。重要的是要注意,在getServerSideProps对您的身份验证提供程序的请求解决之前,获取用户数据将阻止呈现。为避免造成瓶颈并减少TTFB(到达第一个字节的时间),您应确保身份验证查找快速。否则,请考虑静态生成。

身份验证提供者

现在,我们已经讨论了身份验证模式,让我们看一下特定的提供程序,并探讨它们如何与Next.js一起使用。

拥有自己的数据库

例子

如果您已有一个包含用户数据的数据库,则可能需要使用与提供商无关的开源解决方案。

  • 如果您需要电子邮件/密码登录,请使用next-iron-session
  • 如果需要将会话数据保留在服务器上,请使用next-auth
  • 如果您需要支持社交登录(Google,Facebook等),请使用next-auth
  • 如果要使用JWT,请使用next-auth

这两个库都支持任一身份验证模式。如果您对Passport感兴趣,我们还提供使用安全和加密cookie的示例:

Firebase

例子

使用Firebase身份验证时,我们建议使用静态生成模式。

可以使用Firebase Client SDK生成ID令牌,并将其直接转发到服务器上Firebase的REST API进行登录。但是,对Firebase的请求可能需要一些时间才能解决,具体取决于用户的位置。

您可以将FirebaseUI用于嵌入式UI,也可以使用自定义React hook创建自己的UI 。

Magic (Passwordless)

例子

使用无密码登录的Magic支持静态生成模式。与Firebase相似,必须在客户端上创建唯一标识符,然后将其作为标头转发到登录。然后,Magic的Node SDK可用于交换标识符以获取用户信息。

Auth0

例子

Auth0可以支持两种身份验证模式。您还可以利用API路由登录/注销和检索用户信息。使用Auth0 SDK登录后,您可以利用静态生成或getServerSideProps用于服务器端渲染。

Supabase

例子

Supabase是Firebase的开源替代方案,支持其许多功能,包括身份验证。它允许使用JWT令牌进行行级安全保护,并支持第三方登录。两种身份验证模式均受支持。

Userbase

例子

用户库支持用于身份验证的静态生成模式。它是开源的,并通过端到端加密提供了高度的安全性。您可以在他们的官方网站上了解更多有关它的信息。

SuperTokens

例子

SuperTokens是一个高度可定制的开源解决方案,分为多个模块(因此您仅使用所需的模块)。SuperTokens当前支持凭证登录,电子邮件验证,密码重置流程和第三方登录。

作者:terry,如若转载,请注明出处:https://www.web176.com/nextjs/2449.html

(0)
打赏 支付宝 支付宝 微信 微信
terryterry
上一篇 2021年4月20日 下午3:24
下一篇 2021年4月20日 下午4:24

相关推荐

发表回复

登录后才能评论