useJwt

分类

@Integrations

导出大小

285 B

包

@vueuse/integrations

上次更改

8 个月前

jwt-decode 的封装。

演示

源代码在线演练 (beta)

头部

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

负载

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

可在 @vueuse/integrations 插件中使用。

安装

bash

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
> {
  /**
   * Value returned when encounter error on decoding
   *
   * @default null
   */
  fallbackValue
?: Fallback

  /**
   * Error callback for decoding
   */
  onError
?: (error
: unknown) => void
}
export interface UseJwtReturn
<Payload
, Header
, Fallback
> {
  header
: ComputedRef
<Header
 | Fallback
>
  payload
: ComputedRef
<Payload
 | Fallback
>
}
/**
 * Reactive decoded jwt token.
 *
 * @see https://vueuse.org.cn/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
>