九、NextAuth 的 Client API

简介

  • Session 对象:
{
  user: {
    name: string
    email: string
    image: string
  },
  expires: Date 
}
  • Session 数据对象并不包含敏感信息,比如Session-Token或者OAuth-Token,它只加载页面显示所需要的最小数据,比如Name、Email、Image,如果需要自定义sessiion对象,需要使用 session callback
  • 需要确保 <SessionProvider> 添加到 pages/_app.js 中,并作为顶级元素。
  • 使用举例:
import { useSession } from "next-auth/react"

export default function Component() {
  const { data: session, status } = useSession()

  if (status === "authenticated") {
    return <p>Signed in as {session.user.email}</p>
  }

  return <a href="/api/auth/signin">Sign in</a>
}

useSession()

  • 注意,这个函数客户端可用,但是服务端是不可用的。

  • useSession() returns an object containing two values: data and status:

  • data 的取值可能是 undefinednull.

    • 当session不存在时 data 返回 undefined
    • 当session检索失败时, data 返回 null
    • 在成功的情况下 data 返回 Session.
  • status: 是一个枚举,取值包括 "loading" | "authenticated" | "unauthenticated"

onUnauthenticated() 回调

  • 通常情况下,可以再 useSession 中加入 onUnauthenticated() 回调来处理没有授权的情况,举例:
import { useSession } from "next-auth/react"

export default function Admin() {
  const { status } = useSession({
    required: true,
    onUnauthenticated() {
      // The user is not authenticated, handle it here.
    },
  })

  if (status === "loading") {
    return "Loading or not authenticated..."
  }

  return "User is logged in"
}

结束

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容