
踩坑!!!记录一下解决前端vue 使用jwt-decode 解析后端传来的jwt令牌报错 函数未定义!!!
vue
vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架,具有简洁的语法和丰富的组件库,可以用于开发单页面应用程序和多页面应用程序。
项目地址:https://gitcode.com/gh_mirrors/vu/vue

·
一、首先,确保你已经安装了jwt-decode
库。如果你还没有安装,可以通过npm或yarn进行安装:
二、模板引入jwt-decode
库
(1) 错误引入
然后解析我们后端传来的jwt令牌
这是我后端对jwt令牌载荷部分传入的数据包括(id,name,username)
然后通过前端jwt-decode解析获取比如这里的name字段对应的内容
本地浏览器运行可以看看效果
发现报错 本且控制台也显示
说明我们当前函数没有定义,找了许多原因
最后才发现。。。。。。。。jwt-decode中已没有jwt-decode模块,所以无法使用jwt-decode进行jwt令牌解析。现在已经变成 jwtDecode
(2)正确引入
这里需要以命名的方式导出 需要加上大括号:{ },不加也是不能使用的
然后把下面的jwt-decode更换成 jwtDecode
然后我们浏览器运行看看效果
可以看见已经解析成功我们后端jwt中name字段对应的内容了!!!




vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架,具有简洁的语法和丰富的组件库,可以用于开发单页面应用程序和多页面应用程序。
最近提交(Master分支:8 个月前 )
9e887079
[skip ci] 6 个月前
73486cb5
* chore: fix link broken
Signed-off-by: snoppy <michaleli@foxmail.com>
* Update packages/template-compiler/README.md [skip ci]
---------
Signed-off-by: snoppy <michaleli@foxmail.com>
Co-authored-by: Eduardo San Martin Morote <posva@users.noreply.github.com> 10 个月前
更多推荐
所有评论(0)