获取会话

用户登录后，您通常希望获取会话对象，以便以某种方式使用其中的数据。常见用例是显示他们的个人资料图片或显示其他用户信息。

./components/UserAvatar.tsx

import { auth } from "../auth"
 
export default async function UserAvatar() {
  const session = await auth()
 
  if (!session.user) return null
 
  return (
    <div>
      <img src={session.user.image} alt="User Avatar" />
    </div>
  )
}

虽然 next-auth 支持使用 useSession 和 SessionProvider 在 App Router 和 Pages Router 中进行客户端数据检索，但在实际场景中，它们的应用频率较低。通常，您需要充分利用服务器端渲染来优化性能和安全性。

App Router

app/admin/dashboard.tsx

"use client"
import { useSession } from "next-auth/react"
 
export default function Dashboard() {
  const { data: session } = useSession()
 
  if (session?.user?.role === "admin") {
    return <p>You are an admin, welcome!</p>
  }
 
  return <p>You are not authorized to view this page!</p>
}

app/admin/page.tsx

import { SessionProvider } from "next-auth/react"
import { Dashboard } from "./Dashboard"
 
export default function Administrator() {
  return (
    <SessionProvider>
      <Dashboard />
    </SessionProvider>
  )
}

页面服务器端

在 Pages Router 中，要在组件中访问会话，您首先需要在页面中获取 session 对象，然后将其传递给组件。

./pages/dashboard.tsx

import { auth } from "@/auth.ts"
import { UserAvatar } from "@/components/UserAvatar"
 
export default function Dashboard({ session }) {
  return (
    <nav>
      <UserAvatar session={session} />
    </nav>
  )
}
 
export async function getServerSideProps(ctx) {
  const session = await auth(ctx)
 
  return {
    props: {
      session,
    },
  }
}

页面客户端

在使用 useSession() 客户端访问会话时，请确保您的页面包含 Auth.js <SessionProvider /> 组件。

pages/_app.tsx

import type { AppProps } from "next/app"
import { SessionProvider } from "next-auth/react"
 
export default function MyApp({
  Component,
  pageProps: { session, ...pageProps },
}: AppProps) {
  return (
    <SessionProvider session={session}>
      <Component {...pageProps} />;
    </SessionProvider>
  )
}

pages/dashboard.tsx

import { useSession } from "next-auth/react"
import { UserAvatar } from "@/components/UserAvatar"
 
export default function Dashboard() {
  const { data: session } = useSession()
 
  return (
    <nav>
      <UserAvatar session={session} />
    </nav>
  )
}

最后，我们可以在组件中使用它。

./components/UserAvatar.tsx

import type { Session } from "next-auth"
 
export function UserAvatar({ session }: { session: Session | null }) {
  return (
    <div>
      <img
        src={session?.user?.image ?? "https://i.pravatar.cc/300"}
        alt="User Avatar"
      />
    </div>
  )
}

在幕后，Qwik 会自动为您准备会话，因此您无需为此实现自定义逻辑。您可以在服务器上使用 event.sharedMap.get("session") 以及在客户端上使用 useSession() 操作来读取会话。

在 SvelteKit 中，您需要从 +page.server.ts 或 +layout.server.ts 文件中的 load 函数返回 session 对象。

src/routes/+page.server.ts

import type { PageServerLoad } from "./$types"
 
export const load: PageServerLoad = async (events) => {
  const session = await events.locals.auth()
 
  if (!session?.user?.userId) {
    redirect(303, `/login`)
  }
 
  return {
    session,
  }
}

然后，您可以在页面中的 $page.data 对象上访问 session。

src/routes/+page.svelte

<script lang="ts">
  import { page } from "$app/stores"
</script>
 
<nav>
  <img
    src={$page.data.session?.user?.image ?? "https://i.pravatar.cc/300"}
    alt="User Avatar"
  />
</nav>

app.ts

import { getSession } from "@auth/express"
 
export function authSession(req: Request, res: Response, next: NextFunction) {
  res.locals.session = await getSession(req)
  next()
}
 
app.use(authSession)
 
// Now in your route
app.get("/", (req, res) => {
  const { session } = res.locals
  res.render("index", { user: session?.user })
})

如果您想使用来自 OAuth 提供者的更多字段来扩展会话，例如，请查看我们的 “扩展会话”指南。

登录和注销保护资源

获取会话

App Router

页面服务器端

页面客户端

关于 Auth.js

下载

鸣谢