NuxtAuth

外观

收藏 0

会话访问与管理 ​

在设置好你选择的提供商后，你可以开始将 NuxtAuth 集成到你的前端。为此，NuxtAuth 提供了两个应用端组合式函数，可以用来与身份验证会话进行交互。

useAuth 组合式函数 ​

useAuth 组合式函数是你访问和操作会话状态和数据的主要入口。以下是你可使用的主要方法

ts
const {
  status,
  data,
  lastRefreshedAt,
  getCsrfToken,
  getProviders,
  getSession,
  signIn,
  signOut
} = useAuth()
ts
const {
  status,
  data,
  lastRefreshedAt,
  token,
  refreshToken,
  getSession,
  signUp,
  signIn,
  signOut,
  refresh
} = useAuth()

status ​

计算值，返回当前会话状态。选项：unauthenticated，loading 或 authenticated。

vue
<script setup lang="ts">
const { status } = useAuth()
</script>

<template>
  You are currently {{ status }}.
</template>

data ​

会话中的当前数据。选项：未尝试身份验证时为 undefined，用户未通过身份验证时为 null，用户通过身份验证时为 SessionData。

要自定义你的 SessionData，请参阅以下关于 authjs 和 local / refresh 的文档。

vue
<script setup lang="ts">
const { data } = useAuth()
</script>

<template>
  <div v-if="data">
    Hello {{ data.user.name }}!
  </div>
  <div v-else>
    You are not logged in.
  </div>
</template>

token local only ​

获取的 token，可用于验证后续请求。例如，这可以是 JWT-Bearer token。

ts
function useAPI() {
  const { token } = useAuth()

  return $fetch.create({
    baseURL: '/api',
    headers: {
      Authorization: `Bearer ${token.value}`
    }
  })
}

仅限 Local

token 仅适用于 local 提供商！

lastRefreshedAt ​

会话上次刷新的时间，如果未尝试刷新则为 undefined，否则为刷新发生的 Date 时间。

getCsrfToken authjs only ​

返回当前的跨站请求伪造令牌 (CSRF Token)，用于发出 POST 请求（例如，用于登录和退出）。

如果你未使用内置的 signIn() 和 signOut() 方法，则可能只需要使用此方法。阅读更多：https://next-auth.js.org/getting-started/client#getcsrftoken

仅限 AuthJS

getCsrfToken 仅适用于 authjs 提供商！

getProviders authjs only ​

获取所有已配置 OAuth 提供商的列表。用于创建自定义登录页面。返回 Provider 数组。

ts
export interface Provider {
  id: string
  name: string
  type: ProviderType
  signinUrl: string
  callbackUrl: string
}

仅限 AuthJS

getProviders 仅适用于 authjs 提供商！

getSession ​

从服务器获取或重新加载当前会话。可以选择传递 required 以在会话不存在时强制登录。

vue
<script setup lang="ts">
const { getSession } = useAuth()
</script>

<template>
  <button @click="() => getSession()">
    Refresh
  </button>
  <button @click="() => getSession({ required: true })">
    Refresh or trigger signin
  </button>
</template>

signUp local only ​

ts
// `credentials` are the credentials your sign-up endpoint expects,
const credentials = { username: 'jsmith', password: 'hunter2' }

// Trigger a sign-up
await signUp(credentials)

// Trigger a sign-up with auto sign-in and redirect to the profile page within the application
await signUp(credentials, { callbackUrl: '/profile', redirect: true })

// Trigger a sign-up with auto sign-in and redirect to an external website (https://external.example.com)
await signUp(credentials, { callbackUrl: 'https://external.example.com', redirect: true, external: true })

// Trigger a sign-up without auto sign-in and redirect to the home page within the application
await signUp(credentials, { callbackUrl: '/', redirect: true }, { preventLoginFlow: true })

// Trigger a sign-up without auto sign-in and doesn't redirect anywhere
await signUp(credentials, undefined, { preventLoginFlow: true })

信息

你还可以传递 callbackUrl 选项，以便在用户完成操作后将其重定向到特定页面。当用户尝试打开页面 (`/protected`) 但必须首先通过外部身份验证（例如，通过其 Google 帐户）时，这可能很有用。

仅限 Local

signUp 仅适用于 local 提供商！

signIn ​

signIn 根据你的提供商使用不同的语法。

ts
// Trigger a signIn on the signIn page
await signIn()

// Trigger a signIn with a specific oAuth provider
await signIn('github')

// Trigger a signIn with the credentials provider
await signIn('credentials', { username: 'jsmith', password: 'hunter2' })

// Trigger a signIn with a redirect afterwards
await signIn(undefined, { callbackUrl: '/protected' })

// Trigger a signIn with a redirect to an external page afterwards
await signIn(undefined, { callbackUrl: 'https://nuxt.org', external: true })
ts
// `credentials` are the credentials your sign-in endpoint expects,
const credentials = { username: 'jsmith', password: 'hunter2' }

// Trigger a signIn
await signIn(credentials)

// Trigger a signIn with a redirect afterwards
await signIn(credentials, { callbackUrl: '/protected' })

// Trigger a signIn with a redirect to an external page afterwards
await signIn(credentials, { callbackUrl: 'https://nuxt.org', external: true })

// Trigger a signIn without calling getSession directly. You have to manually call it to get session data.
await signIn(credentials, { callGetSession: false })

信息

你还可以传递 callbackUrl 选项，以便在用户完成操作后将其重定向到特定页面。当用户尝试打开页面 (`/protected`) 但必须首先通过外部身份验证（例如，通过其 Google 帐户）时，这可能很有用。

signOut ​

将用户从应用程序中注销。可以选择传递 callbackUrl 以在之后将用户重定向到该 URL。

vue
<script setup lang="ts">
const { signOut } = useAuth()
</script>

<template>
  <button @click="() => signOut">
    Signout
  </button>
  <button @click="() => signOut({ callbackUrl: '/signout' })">
    Signout with redirect
  </button>
  <button @click="() => signOut({ callbackUrl: 'https://nuxt.org', external: true })">
    Signout with external redirect
  </button>
</template>

信息

你还可以传递 callbackUrl 选项，以便在用户完成操作后将其重定向到特定页面。当用户尝试打开页面 (`/protected`) 但必须首先通过外部身份验证（例如，通过其 Google 帐户）时，这可能很有用。

refreshToken local only ​

获取的 refreshToken，可用于获取新的访问 token。例如，refreshToken 看起来像这样：eyDFSJKLDAJ0-3249PPRFK3P5234SDFL;AFKJlkjdsjd.dsjlajhasdji89034

仅限 Local

refreshToken 仅适用于 local 提供商！

refresh ​

触发刷新，这将执行特定于提供商的会话刷新。

useAuthState 组合式函数 ​

useAuthState 组合式函数是访问会话状态和数据的底层存储层。以下是你可使用的主要方法和属性

ts
const {
  status,
  loading,
  data,
  lastRefreshedAt
} = useAuthState()

// Session status, either `unauthenticated`, `loading`, `authenticated`
status.value

// Whether any http request is still pending
loading.value

// Session data, either `undefined` (= authentication not attempted), `null` (= user unauthenticated), `loading` (= session loading in progress), see https://next-auth.js.org/getting-started/client#signout
data.value

// Time at which the session was last refreshed, either `undefined` if no refresh was attempted or a `Date` of the time the refresh happened
lastRefreshedAt.value
ts
const {
  status,
  loading,
  data,
  lastRefreshedAt,
  token,
  rawToken,
  setToken,
  clearToken,
  rawRefreshToken,
  refreshToken
} = useAuthState()

// Session status, either `unauthenticated`, `loading`, `authenticated`
status.value

// Whether any http request is still pending
loading.value

// Session data, either `undefined` (= authentication not attempted), `null` (= user unauthenticated), or session / user data your `getSession`-endpoint returns
data.value

// Time at which the session was last refreshed, either `undefined` if no refresh was attempted or a `Date` of the time the refresh happened
lastRefreshedAt.value

// The fetched token that can be used to authenticate future requests. E.g., a JWT-Bearer token like so: `Bearer eyDFSJKLDAJ0-3249PPRFK3P5234SDFL;AFKJlkjdsjd.dsjlajhasdji89034`
token.value

// Cookie that containes the raw fetched token string. This token won't contain any modification or prefixes like `Bearer` or any other.
rawToken.value

// Helper method to quickly set a new token (alias for rawToken.value = 'xxx')
setToken('new token')

// Helper method to quickly delete the token cookie (alias for rawToken.value = null)
clearToken()

Local 提供商

请注意，当使用 setToken、clearToken 或手动更新 rawToken.value 时，你必须手动从 useAuth 组合式函数调用 getSession，以便刷新新的用户状态。

ts
const { getSession } = useAuth()

const { setToken } = useAuthState()
// ...setToken('...')
await getSession()

在 MIT 许可证下发布。

由 SIDESTREAM 开发