身份验证

身份验证 (Authentication) 用于验证用户身份，而授权 (Authorization) 则控制用户可访问的内容。Next.js 支持多种身份验证模式，每种模式针对不同的使用场景设计。本页将逐一介绍这些模式，以便您根据需求做出选择。

身份验证模式

确定所需身份验证模式的第一步是了解您采用的数据获取策略。随后我们可以确定哪些身份验证提供商支持该策略。主要有两种模式：

使用静态生成 (Static Generation) 服务端渲染加载状态，随后在客户端获取用户数据。
通过服务端渲染 (Server-side Rendering) 获取用户数据，避免出现未认证内容的闪烁。

静态生成页面的身份验证

如果页面没有阻塞性数据需求，Next.js 会自动判定该页面为静态页面。这意味着页面中不存在 getServerSideProps 和 getInitialProps。此时您的页面可以先从服务端渲染加载状态，再在客户端获取用户数据。

这种模式的优势在于页面可以通过全球 CDN 分发，并使用 next/link 预加载。实际上这会带来更快的 TTI (可交互时间)。

以下是一个个人资料页面的示例。初始会渲染加载骨架图，当用户请求完成后将显示用户名：

pages/profile.js

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

const Profile = () => {
  // 在客户端获取用户数据
  const { user } = useUser({ redirectTo: '/login' })

  // 服务端渲染加载状态
  if (!user || user.isLoggedIn === false) {
    return <Layout>加载中...</Layout>
  }

  // 用户请求完成后显示用户信息
  return (
    <Layout>
      <h1>您的个人资料</h1>
      <pre>{JSON.stringify(user, null, 2)}</pre>
    </Layout>
  )
}

export default Profile

您可以查看实际运行示例。参考 with-iron-session 示例了解实现原理。

服务端渲染页面的身份验证

如果在页面中导出名为 getServerSideProps 的 async 函数，Next.js 会在每次请求时使用该函数返回的数据预渲染页面。

export async function getServerSideProps(context) {
  return {
    props: {}, // 将作为 props 传递给页面组件
  }
}

让我们将个人资料示例改造为使用服务端渲染 (Server-side Rendering)。如果存在会话，则将 user 作为 prop 传递给页面中的 Profile 组件。注意此示例中没有加载骨架图。

pages/profile.js

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

export const getServerSideProps = withSession(async function ({ req, res }) {
  const { user } = req.session

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

  return {
    props: { user },
  }
})

const Profile = ({ user }) => {
  // 直接显示用户信息，无需加载状态
  return (
    <Layout>
      <h1>您的个人资料</h1>
      <pre>{JSON.stringify(user, null, 2)}</pre>
    </Layout>
  )
}

export default Profile