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

 更新时间:2022年06月15日 15:23:04   作者:~疆  
这篇文章主要介绍了vue中使用jwt-decode解析token,文末给大家补充介绍了vue通过jwt-decode解析token获取需要的数据,本文给大家介绍的非常详细,需要的朋友可以参考下

安装:

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))

补充:vue通过jwt-decode解析token获取需要的数据

1、安装jwt-decode插件

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

2、在页面引入安装的插件

这里我是在vuex中引入的,因为我在登录拿到token后,我就需要解析token,然后将信息保存起来

import jwt_decode from "jwt-decode";

3、使用

// 解析获取token
//data.normal_login_token为请求到的token
const decode = jwt_decode(data.normal_login_token).accountId; // 解析
// 保存accoundId
localStorage.setItem("decode", decode);

4、这样就拿到了,然后在需要使用的时候直接使用就行

//获取解析的数据
localStorage.getItem("decode");

到此这篇关于vue中使用jwt-decode解析token的文章就介绍到这了,更多相关vue解析token内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • vue 如何使用递归组件

    vue 如何使用递归组件

    这篇文章主要介绍了vue 如何使用递归组件,帮助大家更好的理解和使用vue,完成开发需求,感兴趣的朋友可以了解下
    2020-10-10
  • Vue中import与@import的区别及使用场景说明

    Vue中import与@import的区别及使用场景说明

    这篇文章主要介绍了Vue中import与@import的区别及使用场景说明,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-06-06
  • Vue中$once的两个实用小技巧分享

    Vue中$once的两个实用小技巧分享

    $once是一个函数,可以为Vue组件实例绑定一个自定义事件,但该事件只能被触发一次,触发之后随即被移除,下面这篇文章主要给大家介绍了关于Vue中$once的两个实用小技巧,需要的朋友可以参考下
    2022-04-04
  • Vue中.env文件的使用详解

    Vue中.env文件的使用详解

    在Vue项目开发中,.env文件用于配置不同环境(开发、测试、生产)的环境变量,通过不同的文件如.env.development和.env.production来区分环境配置,Vue会根据运行命令自动加载对应的配置文件,如使用npm run serve会加载.env.development
    2024-11-11
  • vue3.2+ts实现在方法中可调用的拟态框弹窗(类el-MessageBox)

    vue3.2+ts实现在方法中可调用的拟态框弹窗(类el-MessageBox)

    这篇文章主要介绍了vue3.2+ts实现在方法中可调用的拟态框弹窗(类el-MessageBox),这个需求最主要的是要通过方法去调用,为了像el-messagebox使用那样方便,需要的朋友可以参考下
    2022-12-12
  • vue车牌搜索组件使用方法详解

    vue车牌搜索组件使用方法详解

    这篇文章主要为大家详细介绍了vue车牌搜索组件的使用方法,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-09-09
  • 关于vue文件中index.vue的使用方法

    关于vue文件中index.vue的使用方法

    这篇文章主要介绍了关于vue文件中index.vue的使用方法,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-10-10
  • 聊聊对Vue中的keep-alive的理解

    聊聊对Vue中的keep-alive的理解

    keepalive 是 Vue 内置的一个组件,可以使被包含的组件保留状态,或避免重新渲染,也就是所谓的组件缓存,这篇文章主要介绍了说说你对Vue的keep-alive的理解,需要的朋友可以参考下
    2022-11-11
  • Vue实现一个返回顶部backToTop组件

    Vue实现一个返回顶部backToTop组件

    本篇文章主要介绍了Vue实现一个返回顶部backToTop组件,可以实现回到顶部效果,具有一定的参考价值,有兴趣的可以了解一下
    2017-07-07
  • vue中将html字符串转换成html后遇到的问题小结

    vue中将html字符串转换成html后遇到的问题小结

    这篇文章主要介绍了vue中将html字符串转换成html后遇到的问题小结,本文给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
    2018-12-12

最新评论