How to decode token in Vue.js?

Question

I got a token after I successfully logged in. I need to be able to parse + decode/descrypt it to see the permission information inside that. How would I do that?

I tried

// token is accessible 
var decoded = jwt_decode(token)
console.log('decoded', decoded)

I kept getting

Here is my token

"e2kEd...LIPH0="

I'm using Vue.js v2.

"InvalidTokenError"

How do I know if my token is compatible with jwt_decode() ?

Try #2

Paste my token here :

https://jwt.io/

Try #3

If I base64_decode() it, I see this

{iversI�iuser{inameSibheng@test.comiapplSiVCiserv[$U#i0-�8rDaiperm[{inameSiEIDiparm[{inameSiAPPidataSiVC}]idataSi COLM,DFQL}{inameSiEIDiparm[{inameSiAPPidataSi*}]idataSiECNVF,CNVZ,DFQL,DJ1L,FV8Z,HY0B,N94X,RD8L,W3XV,X3CY,XPH4,YX4N,ZR10,COLM}{inameSi
VC_GET_EIDiparm[{inameSiBRANDidataSiBROO}]idataT}]}irelm[$U#i'$}s,9ialgoSi
SHA256-RSAisign[$U#I�ZϏpRV,lYt
>Ni_h{,*wE&!?`h±VmSr,n>쏝?L+7_d]JIVl1s:Gɳ<}`

The core piece of info that I really really need is BROO It's there, but I can't seem to parse it.

Does this answer your question? [How to decode jwt token in javascript without using a library?](https://stackoverflow.com/questions/38552003/how-to-decode-jwt-token-in-javascript-without-using-a-library) — Naren, Apr 07 '22 at 16:26
if your token really starts with `e2kEd...`, then it's not a JWT and probably not decodable at all (opaque token). A JWT consists of 3 segments, separated by a '.', e.g
... — jps, Apr 07 '22 at 16:37
Yes, it started with that... e2kEd. ... The back-end team told me that this is decodable and it's a UB JSON. — code-8, Apr 07 '22 at 16:38
maybe decodable, but not JWT. Try pasting it on https://jwt.io If it's a JWT, you'll see decoded JSON on the right column. — jps, Apr 07 '22 at 16:39
I did that I got some data in return but seem currupted. I will update post. — code-8, Apr 07 '22 at 16:49
If it's UBJSON you need to decode it as such as well, instead of parsing it as regular JSON. See https://www.npmjs.com/package/@shelacek/ubjson for a Javascript module to do that. — MatsLindh, Apr 07 '22 at 16:54
Never heard about UB JSON before, learned something new :) At this point I can only recommentd, try with the UB JSON decoder and see if it makes sense. There seems to be some structure in what you posted above. But whatever it is, it has nothing to do with JWT and your backend team should tell you how to deal with it. — jps, Apr 07 '22 at 16:59

Cavidan Bagiri · Answer 1 · 2022-10-19T07:33:24.307

This decoded works for nuxt js and vue js. Just install vue-jwt-decode and follow this code. Good luck

Node js Login Controller

static async loginUser(req, res){
        req.body.password = await hashPassword(req.body.password);
        const user = req.body;
        await UserServiceClass.loginUser(user).
        then((respond)=>{
            const user = {id:respond._id,username:respond.username};
            const access_token = generateToken(user);
            const refresh_token = refreshToken(user);
            res.status(200).json({access_token:access_token, refresh_token:refresh_token});
        }).
        catch((err)=>{
            res.status(500).json({login_error:err})
        })
    }

Vue js Login Page

<script setup>

import VueJwtDecode from 'vue-jwt-decode';

let current_user = reactive({})
const login = async () => {
    console.log(user);
    await useFetch('http://localhost:4000/user/login',{
        method:'POST',
        body:user
    }).then((respond)=>{
        //Keep Token inside of window localstorage
        localStorage.setItem('user', respond.data.value.access_token);
    }).catch((err)=>{
        console.log('err : ', err);
    })
}

const decode = () => {
    //Take token from window local storage
    let token = localStorage.getItem('user');
    try{
        let decoded = VueJwtDecode.decode(token)
        current_user = decoded;
    }
    catch(err){
        console.log('token is null: ',err);
    }
}

</script>

How to decode token in Vue.js?

"InvalidTokenError"

Try #2

Try #3

1 Answers1