useJwt

类别

@Integrations

导出体积

285 B

依赖包

@vueuse/integrations

上次更改

1 hour ago

jwt-decode 的封装。

示例

源码playground (beta)

Header

{
  "alg": "HS256",
  "typ": "JWT"
}

Payload

{
  "sub": "1234567890",
  "iat": 1516239022
}

Available in the @vueuse/integrations add-on.

安装

npm install jwt-decode@^4

使用方法

TypeScript

import { useJwt } from '@vueuse/integrations/useJwt'
import { defineComponent } from 'vue'

const encodedJwt = ref('eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiIxMjM0NTY3ODkwIiwiaWF0IjoxNTE2MjM5MDIyfQ.L8i6g3PfcHlioHCCPURC9pmXT7gdJpx3kOoyAfNUwCc')
const { header, payload } = useJwt(encodedJwt)

import { useJwt } from '@vueuse/integrations/useJwt'
const encodedJwt = ref(
  'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiIxMjM0NTY3ODkwIiwiaWF0IjoxNTE2MjM5MDIyfQ.L8i6g3PfcHlioHCCPURC9pmXT7gdJpx3kOoyAfNUwCc',
)
const { header, payload } = useJwt(encodedJwt)

类型声明

export interface UseJwtOptions<Fallback> {
  /**
   * 解码出错时返回的值
   *
   * @default null
   */
  fallbackValue?: Fallback
  /**
   * 解码出错时的错误回调函数
   */
  onError?: (error: unknown) => void
}
export interface UseJwtReturn<Payload, Header, Fallback> {
  header: ComputedRef<Header | Fallback>
  payload: ComputedRef<Payload | Fallback>
}
/**
 * 响应式解码的 JWT token。
 *
 * @see https://vueuse.org/useJwt
 */
export declare function useJwt<
  Payload extends object = JwtPayload,
  Header extends object = JwtHeader,
  Fallback = null,
>(
  encodedJwt: MaybeRefOrGetter<string>,
  options?: UseJwtOptions<Fallback>,
): UseJwtReturn<Payload, Header, Fallback>

源码

源码 • 演示 • 文档

贡献者

一纸忘忧

更新日志

没有最近的更新日志