踩坑！！！记录一下解决前端vue 使用jwt-decode 解析后端传来的jwt令牌报错 函数未定义！！！

已于 2024-05-09 22:47:31 修改
阅读量451 收藏 3
点赞数 7
分类专栏： 问题解决 文章标签： 前端 vue.js javascript java
于 2024-05-03 02:18:58 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/2301_77058976/article/details/138405130
版权

一、首先，确保你已经安装了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字段对应的内容了！！！

何政@
关注
  • 7
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 4
    评论
专栏目录
来来来~ 码一万字，带你读懂JWT
wdjnb的博客
05-06 2251
1. 为什么要用 JWT ? 认证 在谈起 JWT 之前，我们先了解一下什么是认证。 在登录淘宝、微博等软件或者网站之前，我们需要通过填写账号和密码来校验身份。认证是用来验证用户身份合法性的一种方式。 那我们登录成功之后，网站如何记录我们的身份信息呢？ 前面我们在学习 servlet 的时候，知道了传统的系统主要是通过 session 来存储用户的信息。session 将用户的信息存储在服务端。 但是随着用户数量的增多，服务端就需要存一堆用户的认证信息，这种方式会不断增加服务端的压力..
django_rest-vuejs-auth：使用JWT令牌，Vuejs（前端）和Django-Rest（后端）的身份验证项目
02-04
使用JWT令牌，Vue.js（前端）和Django-Rest（后端）的身份验证项目。 流： 用户在客户端（Vue.js）输入其凭据。 该信息将转发到后端API。 如果信息有效，则生成访问和刷新令牌，然后将其发送回客户端。 令牌存储在...
jwt解密token
stone_tomcate的博客
03-23 1223
import com.alibaba.fastjson.JSONObject; import com.auth0.jwt.JWT; import com.auth0.jwt.algorithms.Algorithm; import com.auth0.jwt.exceptions.JWTDecodeException; import com.auth0.jwt.interfaces.Deco...
推荐使用：jwt-decode - 简单易用的JWT解码库
最新发布
gitblog_00038的博客
05-11 914
推荐使用：jwt-decode - 简单易用的JWT解码库 项目地址:https://gitcode.com/auth0/jwt-decode 在现代Web开发中，JSON Web Tokens（JWTs）被广泛用于身份验证和授权，以确保数据的安全传输。为此，我们强烈推荐一个轻量级、易于使用的JavaScript库——jwt-decode。这个库能帮助你在浏览器环境中轻松解码Base64Url编码...
jwt-decode, 解码JWT令牌；适用于浏览器应用程序.zip
10-10
jwt-decode, 解码JWT令牌；适用于浏览器应用程序 jwt解码是一个小型浏览器库，可以帮助解码Base64Url编码的JWTs标记。注意：这个库没有验证令牌，任何格式良好的JWT都可以解码。 应该使用 express JWT 。koa JWT 。 Owin承载JWT插件等方式验证服务器端
vue通过jwt-decode解析token获取需要的数据(学习篇)
skyblue_afan的博客
12-10 7973
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 de
jwt token解码
05-13 2770
最近开发中需要从jwt token中解析出数据，写了个类，验证通过 1、首先加入maven依赖： <dependency> <groupId>com.auth0</groupId> <artifactId>java-jwt</artifactId> <version>3.2.0</version> </dependency> 2、创建jwt工具类 import com.auth.
jsonwebtoken、jwt-decode实现jwt获取和解析
热门推荐
彭世瑜的博客
03-13 1万+
一、jwt获取 jsonwebtoken ： https://www.npmjs.com/package/jsonwebtoken npm install jsonwebtoken 代码示例 const jwt = require('jsonwebtoken'); // 数据 const data = { name: "Tom", age: 23 } // 秘钥 const ...
vue-auth-jwt:与JWT后端通信时用于处理前端身份验证的开源Vue库
03-14
Vue Auth JWT Vue Auth JWT是一个轻量级的库，用于将您的Vue应用程序与JWT（JSON Web令牌）驱动的身份验证后端进行通信。 它提供了简单的Vuex函数，这些函数应用了正确的凭据和请求样式，可以轻松地在标头中添加JWT...
uchat-master_watchusr_chat_YouCan!_
10-02
"为主题，为我们提供了一个可自定义、易使用的聊天室解决方案。本文将深入探讨这个项目的核心知识点，帮助你理解和掌握如何构建一个自己的聊天室。 一、项目概述 uchat-master项目是一个基于开源技术构建的实时聊天...
vue-jwt-demo-master.zip
06-30
vue通过jwt认证。import Vue from 'vue' import App from './App.vue' import Login from './component/Login.vue' import Home from './component/Home.vue' import VueRouter from 'vue-router' import Vue...
后台管理系统实战项目-04 使用jwt-decode解析Token值
wsxhfa的专栏
12-07 957
通过前后端分离后，后端会返回Token，解析Token之后前端可以直接使用Token中所包含的信息，当然可以不使用Token的值，获取Token后可以再次请求一下用户信息，但是多了一步。所以直接使用Token解析后的值，会很方便。新建UseInfo.ts文件。
（已解决）vue中如何解析jwt令牌，vue中jwt-decode无法使用，报错缺少类jwt-decode，无法找到jwt-decode
BrianGriffin的博客
01-31 1097
jwt-decode经过了一次更新，jwt-decode中已没有jwt-decode模块，所以无法使用jwt-decode进行jwt令牌解析。通过查找模块，发现jwt-decode模块更新为jwtDecode模块。所以需要使用jwtDecode进行解析。使用es6语法进行导入。
DecodedJWT和JWT
mingzq123的博客
03-26 2042
获取JWT的签名信息。作业：使用JWT创建一个包含用户ID和用户名的JWT，并使用HS256算法对其进行签名。使用DecodedJWT类解码JWT，从中获取用户的ID和用户名，然后根据用户ID查询用户信息并返回。： 获取JWT的头部信息。： 获取JWT的主题。： 获取JWT的签发时间。获取JWT使用的加密算法。： 获取JWT的接收者。：使用指定的算法对JWT进行签名。
vue中使用jwt-decode解析token的方法
mylbest的博客
08-15 1532
判断是否有token及token过期。
nodejs使用jsonwebtoken/jwt-decode生成jwt和解密token的方法
jiaohuizhuang6019的博客
09-19 820
nodejs使用jsonwebtoken/jwt-decode生成jwt和解密token的方法
vue中使用jwt-decode解析token
06-15 3037
引入： 使用：
【Python】jwt解码
诗与浪子的博客
10-07 1755
【代码】jwt解码。
前端vue使用el-select对后端传过来的数组进行展示
06-03
你可以通过以下步骤使用 `el-select` 展示后端传过来的数组： 1. 在 Vue 的 data 中定义一个变量来存储后端传过来的数组，例如 `options`。 2. 在 `mounted` 钩子函数中，使用 axios 或其他方式获取后端传过来的数据，并将其赋值给 `options` 变量。 3. 在模板中使用 `el-select` 标签，并将 `options` 绑定到 `options` 属性上，例如： ```html <el-select v-model="selectedOption" :options="options"></el-select> ``` 4. 如果需要对选项进行筛选或排序，可以使用 `el-select` 的 `filterable` 和 `multiple` 属性，或者使用 JavaScript 数组方法进行处理。 5. 如果需要对选项进行分组，可以使用 `el-option-group` 标签，并将 `el-option` 标签放置在相应的分组下。 请注意，这只是一个基本的示例，具体的实现方式可能因具体情况而异。
评论 4
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

何政@

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值