跳到主要内容

useJwt

分类
导出大小
285 B
@vueuse/integrations
上次更改
8 个月前

jwt-decode 的封装。

演示

头部

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

负载

{
  "sub": "1234567890",
  "iat": 1516239022
}
可在 @vueuse/integrations 插件中使用。

安装

bash
npm install jwt-decode@^4

用法

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

类型声明

ts
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
>

来源

源代码演示文档

贡献者

Anthony Fu
Anthony Fu
SerKo
IlyaL
Robin
IlyaL
Devix Rootix
Doctorwu
Curt Grimes
Jelf
Alex Kozack
lstoeferle

更新日志

v12.8.0
7432f - feat(types): 废弃 MaybeRefMaybeRefOrGetter,转而使用 Vue 的原生类型 (#4636)
v12.3.0
59f75 - feat(toValue): 废弃 @vueuse/shared 中的 toValue,转而使用 Vue 的原生函数
0a9ed - feat!: 放弃对 Vue 2 的支持,优化打包并清理 (#4349)
9037d - 功能!: 将 jwt-decode 升级到 v4 (#3510)

根据 MIT 许可证发布。