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内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • 解决VUE项目在IIS部署出现：Uncaught SyntaxError: Unexpected token ＜ 报错

    解决VUE项目在IIS部署出现：Uncaught SyntaxError: Unexpected token ＜ 报错

    一.第一个解决方法是把mode改成history这个问题就会消失 二.第二个解决方法是publicPath设置成’/’,不能是’./’ const publicPath=''; module.exports = { // publicPath: process.env.NODE_ENV === 'production' ? '/lucky-draw' : '/' publicPath: `/${publicPath}` }; 三.报错404 Not Found,请重写url 在IIS正常部署完v

  • Vuex处理用户Token过期及优化设置封装本地存储操作模块

    目录 1. 处理用户 Token 2. 优化封装本地存储操作模块 - 封装localStrage功能 3. Vuex各属性的使用 4. 关于 Token 过期问题 5.优化设置 Token 1. 处理用户 Token Token 是用户登录成功之后服务端返回的一个身份令牌,在项目中的多个业务中需要使用到: 访问需要授权的 API 接口 校验页面的访问权限 ... 问题:Token往哪儿存? 我们只有在第一次用户登录成功之后才能拿到 Token.所以为了能在其它模块中获取到 Token 数据,我们

  • vue实现token登录验证的完整实例

    vue实现token登录验证的完整实例

    目录 token可用于登录验证和权限管理. 登录页 -----Login.vue 路由守卫 ----- router/index.js 封装axios 添加请求拦截器 在每次请求之前进行的操作 home页面 总结 token可用于登录验证和权限管理. 大致步骤分为: 前端登录,post用户名和密码到后端. 后端验证用户名和密码,若通过,生成一个token返回给前端. 前端拿到token存储到localStorage管理,登录成功进入首页. 之后前端每一次权限操作如跳转路由,都需要判断是否存在to

  • vuex存储token示例

    1.在login.vue中通过发送http请求获取token //根据api接口获取token var url = this.HOST + "/session"; this.$axios.post(url, { username: this.loginForm.username, password: this.loginForm.pass }).then(res => { // console.log(res.data); this.$message.success('登录成功'

  • vue请求接口并且携带token的实现

    目录 一.处理跨域问题 二.登录获取token 三.开发登录页面存储token 四.通过token进行路由的拦截 一.处理跨域问题 1.在vue2.0的config文件夹下面的index.js文件里面或者在vue3.0中新建vue.config.js文件,写入以下代码: module.exports = { devServer: { open: true, port: 8080, //以上的ip和端口是我们本机的;下面为需要跨域的 proxy: { //配置跨域 '/apis': { targe

  • vue中Axios添加拦截器刷新token的实现方法

    目录 1. Axios基本用法: 2. Axios基本封装用法: 3. 添加拦截器的用法 4. 注意事项: Axios是一款网络前端请求框架,基本用法如下: 1. Axios基本用法: const response = await Axios.create({ baseURL: "https://test.api.com", headers: { 'Content-Type': 'application/json', }, }).post<RequestResponse>(

  • vue中 $forceUpdate的使用解析

    目录 方案分析 forceUpdate 本质 实现原理 分析 刷新页面 使用v-if标记 key-changing 在vue的开发过程中,数据的绑定通常来说都不用我们操心,例如在​​data​​中有一个​​msg​​的变量,只要修改它,那么在页面上,​​msg​​的内容就会自动发生变化.但是如果对于一个复杂的对象,例如一个对象数组,直接去给数组上某一个元素增加属性,或者直接把数组的​​length​​变成0,vue可能就无法知道发生了改变.这个其实就是考验对于双向绑定的更进一步的理解应用了.在V

  • VUE中的export default和export使用方法解析

    目录 export default和export的区别 export default简单示例 注意: 代码示例 export default和export的区别 export主要用于对外输出本模块变量的接口,一个文件就可以被理解为一个模块.export就是导出. import就是在一个模块中加载另一个含有export接口的模块, import就是导入. export default和export都能导出一个模块里面的常量,函数,文件,模块等,在其它文件或模块中通过import来导入常量,函数,文

  • vue中v-for加载本地静态图片方法

    vue-cli 项目中本地图片放在assets目录下(原因vue-cli最开始的vue图片就在里面,就把所有图片放在里面了): 之后v-for 动态加载图片路径就遇到了问题 源码: <ul> <li v-for="(item,index) in teamInfo" @click="trastFun(item)"> <div><img v-bind:src="item.imageurl"/></

  • Android中gson、jsonobject解析JSON的方法详解

    Android中gson、jsonobject解析JSON的方法详解

    JSON的定义: 一种轻量级的数据交换格式,具有良好的可读和便于快速编写的特性.业内主流技术为其提供了完整的解决方案(有点类似于正则表达式 ,获得了当今大部分语言的支持),从而可以在不同平台间进行数据交换.JSON采用兼容性很高的文本格式,同时也具备类似于C语言体系的行为. JSON对象: JSON中对象(Object)以"{"开始, 以"}"结束. 对象中的每一个item都是一个key-value对, 表现为"key:value"的形式, ke

  • 在Vue中使用highCharts绘制3d饼图的方法

    在Vue中使用highCharts绘制3d饼图的方法

    highcharts是国外知名基于javascript的图表库.由于中文官网的vue中使用highcharts配置繁琐并且需要引入jquery作为依赖,所以弃用. 接下来,给各位伙伴简要的讲叙下highcharts在vue中的使用和配置方法. 首先使用 npm在你的项目中安装vue-highcharts npm install vue-highcharts --save 由于vue-highcharts依赖于highcharts,我们还需要安装后者 npm install highcharts

  • vue中如何动态绑定图片,vue中通过data返回图片路径的方法

    vue中如何动态绑定图片,vue中通过data返回图片路径的方法

    在项目中遇到需要动态加载图片路径,图片路径并非是从后台获取过来的数据. 因此在data中必须用require加载,否则会当成字符串来处理. HTML如下: JS如下: 以上这篇vue中如何动态绑定图片,vue中通过data返回图片路径的方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们. 您可能感兴趣的文章: Vue.js中的图片引用路径的方式 基于vue 动态加载图片src的解决方法 vue cli使用绝对路径引用图片问题的解决

  • vue中简单弹框dialog的实现方法

    效果如下,dialog中内容自行添加 <template> <div> <div class="dialog-wrap"> <div class="dialog-cover" v-if="isShow" @click="closeMyself"></div> <transition name="drop"> <div class=

  • vue中动态绑定表单元素的属性方法

    在vue中有时候可能想像使用jq一样给某个元素添加属性,如 $('#select1').attr('disabled','disabled') 这种方法也能实现,但是在vue中能用vue的方法还是尽量不要使用jq 使用vue的方法来添加属性可以这样: <select v-model='issues' class="ui dropdown t-select-list" :disabled='isDisabled'> <option></option>

  • vue中实现移动端的scroll滚动方法

    一.首先安装安装 npm install better-scroll --save 二. 并在组件中引用 import BScroll from 'better-scroll' template中引用指向将要滚动的DOM元素 根据官方文档ref属性的说明,我们可以这样将DOM元素引用 三. 在methods中注册_initScroll方法,这个方法是对better-scroll的实例化,并且这个方法将来会在页面DOM结构渲染后被执行 methods: { _initScroll(){ this.

  • Vue中的无限加载vue-infinite-loading的方法

    本文介绍了Vue中的无限加载vue-infinite-loading的方法,分享给大家,具体如下: 注意:vue-infinite-loading2.0只能在Vue.js2.0中使用.如果你想在Vue.js1.0中使用,请安装vue-infinite-loading1.3版本 如何安装 npm install vue-infinite-loading --save 导入方式 es6模块导入方式 import InfiniteLoading from 'vue-infinite-loading';

随机推荐