diff options
author | 2022-12-27 09:38:35 +0100 | |
---|---|---|
committer | 2022-12-27 09:38:35 +0100 | |
commit | acc7f0a586c64500c5f720e70cdbccf9bffe76d9 (patch) | |
tree | 0d1303641ec9d10821f108010e2cec4c9a8f50f9 /src/tools/jwt-parser/jwt-parser.vue | |
parent | ebb7301a98cf4ad29334393853428f097c1b1ed3 (diff) | |
download | it-tools-acc7f0a586c64500c5f720e70cdbccf9bffe76d9.tar.gz it-tools-acc7f0a586c64500c5f720e70cdbccf9bffe76d9.tar.zst it-tools-acc7f0a586c64500c5f720e70cdbccf9bffe76d9.zip |
feat(new-tool): jwt parser (#262)
* npm install jwt-decode
* added base tool structure
* added function to decode JWT and display header and payload
* use a table to display the data
* show human readable values
* added switch to toggle display of parsed values
* lint
* replaced basic package-lock.json with pnpm-lock.json
* change the icon of the tool
* simplify return
* use camelCase
* added description of the tool
* always parse the values
* use camelCase...
Diffstat (limited to 'src/tools/jwt-parser/jwt-parser.vue')
-rw-r--r-- | src/tools/jwt-parser/jwt-parser.vue | 63 |
1 files changed, 63 insertions, 0 deletions
diff --git a/src/tools/jwt-parser/jwt-parser.vue b/src/tools/jwt-parser/jwt-parser.vue new file mode 100644 index 0000000..e0b5389 --- /dev/null +++ b/src/tools/jwt-parser/jwt-parser.vue @@ -0,0 +1,63 @@ +<template> + <n-card> + <n-form-item label="JWT to decode" :feedback="validation.message" :validation-status="validation.status"> + <n-input v-model:value="rawJwt" type="textarea" placeholder="Put your token here..." rows="5" /> + </n-form-item> + + <n-table> + <tbody> + <td colspan="2" class="table-header"><strong>Header</strong></td> + <tr v-for="[key, value] in Object.entries(decodedJWT.header)" :key="key"> + <td class="claims"><claim-vue :claim="key" /></td> + <td> + <value-vue :claim="key" :value="value" /> + </td> + </tr> + <td colspan="2" class="table-header"><strong>Payload</strong></td> + <tr v-for="[key, value] in Object.entries(decodedJWT.payload)" :key="key"> + <td class="claims"><claim-vue :claim="key" /></td> + <td> + <value-vue :claim="key" :value="value" /> + </td> + </tr> + </tbody> + </n-table> + </n-card> +</template> + +<script setup lang="ts"> +import { computed, ref } from 'vue'; +import jwt_decode from 'jwt-decode'; +import { useValidation } from '@/composable/validation'; +import { isNotThrowing } from '@/utils/boolean'; +import { safeJwtDecode } from './jwt-parser.service'; +import claimVue from './claim.vue'; +import valueVue from './value.vue'; + +const rawJwt = ref( + 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiIxMjM0NTY3ODkwIiwibmFtZSI6IkpvaG4gRG9lIiwiaWF0IjoxNTE2MjM5MDIyfQ.SflKxwRJSMeKKF2QT4fwpMeJf36POk6yJV_adQssw5c', +); + +const decodedJWT = computed(() => { + return safeJwtDecode(rawJwt.value); +}); +const validation = useValidation({ + source: rawJwt, + rules: [ + { + validator: (value) => value.length > 0 && isNotThrowing(() => jwt_decode(value, { header: true })), + message: 'Invalid JWT', + }, + ], +}); +</script> + +<style lang="less" scoped> +.table-header { + text-align: center; +} + +.claims { + width: 20%; +} +</style> |