Header
{
"alg": "HS256",
"typ": "JWT"
}
Payload
{
"sub": "1234567890",
"iat": 1516239022
}
TIP
available in add-on @vueuse/integrations
useJwt
wrapper for jwt-decode
Install
npm install jwt-decode
Usage
import { defineComponent } from 'vue'
import { useJwt } from '@vueuse/integrations/useJwt'
export default defineComponent({
setup() {
const encodedJwt = ref('eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiIxMjM0NTY3ODkwIiwiaWF0IjoxNTE2MjM5MDIyfQ.L8i6g3PfcHlioHCCPURC9pmXT7gdJpx3kOoyAfNUwCc')
const { header, payload } = useJwt(encodedJwt)
return { header, payload }
},
})
Type Declarations
export interface JwtOptions<Fallback> {
/**
* Value returned when encounter error on decoding
*
* @default null
*/
fallbackValue?: Fallback
/**
* Error callback for decoding
*/
onError?: (error: unknown) => void
}
export interface JwtResult<Payload, Header, Fallback> {
header: ComputedRef<Header | Fallback>
payload: ComputedRef<Payload | Fallback>
}
/**
* Reactive decoded jwt token.
*
* @see https://vueuse.org/useJwt
* @param jwt
*/
export declare function useJwt<
Payload extends object = JwtPayload,
Header extends object = JwtHeader,
Fallback = null
>(
encodedJwt: MaybeRef<string>,
options?: JwtOptions<Fallback>
): JwtResult<Payload, Header, Fallback>