主题
useJwt
jwt-decode
的封装。
¥Wrapper for jwt-decode
.
示例
Header
{
"alg": "HS256",
"typ": "JWT"
}
Payload
{
"sub": "1234567890",
"iat": 1516239022
}
安装
¥Install
bash
npm install jwt-decode@^4
用法
¥Usage
typescript
import { useJwt } from '@vueuse/integrations/useJwt'
import { defineComponent } from 'vue'
export default defineComponent({
setup() {
const encodedJwt = ref('eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiIxMjM0NTY3ODkwIiwiaWF0IjoxNTE2MjM5MDIyfQ.L8i6g3PfcHlioHCCPURC9pmXT7gdJpx3kOoyAfNUwCc')
const { header, payload } = useJwt(encodedJwt)
return { header, payload }
},
})
类型声明
typescript
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/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>