vue中使用jwt-decode解析token的方法

更新時(shí)間：2022年06月15日 15:23:04 作者：~疆

這篇文章主要介紹了vue中使用jwt-decode解析token,文末給大家補(bǔ)充介紹了vue通過(guò)jwt-decode解析token獲取需要的數(shù)據(jù)，本文給大家介紹的非常詳細(xì)，需要的朋友可以參考下

安裝：

cnpm i -S jwt-decode

引入：

import jwt_decode from "jwt-decode";

使用：

import jwt_decode from "jwt-decode";
 
console.log("token:", token)
console.log("解析后的token：", jwt_decode(token))

補(bǔ)充：vue通過(guò)jwt-decode解析token獲取需要的數(shù)據(jù)

1、安裝jwt-decode插件

npm install jwt-decode --save?
//慢的話可以cnpm
cnpm install jwt-decode --save

2、在頁(yè)面引入安裝的插件

這里我是在vuex中引入的，因?yàn)槲以诘卿浤玫絫oken后，我就需要解析token,然后將信息保存起來(lái)

import jwt_decode from "jwt-decode";

3、使用

// 解析獲取token
//data.normal_login_token為請(qǐng)求到的token
const decode = jwt_decode(data.normal_login_token).accountId; // 解析
// 保存accoundId
localStorage.setItem("decode", decode);

4、這樣就拿到了，然后在需要使用的時(shí)候直接使用就行

//獲取解析的數(shù)據(jù)
localStorage.getItem("decode");

到此這篇關(guān)于vue中使用jwt-decode解析token的文章就介紹到這了,更多相關(guān)vue解析token內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

相關(guān)文章

vue 如何使用遞歸組件
這篇文章主要介紹了vue 如何使用遞歸組件，幫助大家更好的理解和使用vue，完成開(kāi)發(fā)需求，感興趣的朋友可以了解下
2020-10-10
Vue中import與@import的區(qū)別及使用場(chǎng)景說(shuō)明
這篇文章主要介紹了Vue中import與@import的區(qū)別及使用場(chǎng)景說(shuō)明，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2023-06-06
Vue中$once的兩個(gè)實(shí)用小技巧分享
$once是一個(gè)函數(shù),可以為Vue組件實(shí)例綁定一個(gè)自定義事件,但該事件只能被觸發(fā)一次,觸發(fā)之后隨即被移除,下面這篇文章主要給大家介紹了關(guān)于Vue中$once的兩個(gè)實(shí)用小技巧,需要的朋友可以參考下
2022-04-04
Vue中.env文件的使用詳解
在Vue項(xiàng)目開(kāi)發(fā)中,.env文件用于配置不同環(huán)境（開(kāi)發(fā)、測(cè)試、生產(chǎn)）的環(huán)境變量,通過(guò)不同的文件如.env.development和.env.production來(lái)區(qū)分環(huán)境配置,Vue會(huì)根據(jù)運(yùn)行命令自動(dòng)加載對(duì)應(yīng)的配置文件,如使用npm run serve會(huì)加載.env.development
2024-11-11
vue3.2+ts實(shí)現(xiàn)在方法中可調(diào)用的擬態(tài)框彈窗(類el-MessageBox)
這篇文章主要介紹了vue3.2+ts實(shí)現(xiàn)在方法中可調(diào)用的擬態(tài)框彈窗（類el-MessageBox）,這個(gè)需求最主要的是要通過(guò)方法去調(diào)用，為了像el-messagebox使用那樣方便，需要的朋友可以參考下
2022-12-12
vue車牌搜索組件使用方法詳解
這篇文章主要為大家詳細(xì)介紹了vue車牌搜索組件的使用方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2021-09-09
關(guān)于vue文件中index.vue的使用方法
這篇文章主要介紹了關(guān)于vue文件中index.vue的使用方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-10-10
聊聊對(duì)Vue中的keep-alive的理解
keepalive?是?Vue?內(nèi)置的一個(gè)組件，可以使被包含的組件保留狀態(tài)，或避免重新渲染，也就是所謂的組件緩存，這篇文章主要介紹了說(shuō)說(shuō)你對(duì)Vue的keep-alive的理解,需要的朋友可以參考下
2022-11-11
Vue實(shí)現(xiàn)一個(gè)返回頂部backToTop組件
本篇文章主要介紹了Vue實(shí)現(xiàn)一個(gè)返回頂部backToTop組件，可以實(shí)現(xiàn)回到頂部效果，具有一定的參考價(jià)值，有興趣的可以了解一下
2017-07-07
vue中將html字符串轉(zhuǎn)換成html后遇到的問(wèn)題小結(jié)
這篇文章主要介紹了vue中將html字符串轉(zhuǎn)換成html后遇到的問(wèn)題小結(jié),本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2018-12-12