vue前端解析jwt

vue前端解析jwt

我们可以用在线解析看解析的结果:https://www.lddgo.net/encrypt/jwt-decrypt

但是如果在前端需要解析token,拿到其中的权限信息,可以这样解决。

在线的:

完美解决:

代码:

js 复制代码
function parseJwt(token) {
  // 分割JWT的三个部分
  const parts = token.split('.');
  // 解码JWT的payload部分
  const payload = decodeBase64Url(parts[1]);
  // 将解码后的payload转换为对象
  return JSON.parse(payload);
}

function decodeBase64Url(input) {
  let base64 = input.replace(/-/g, '+').replace(/_/g, '/');
  switch (base64.length % 4) {
    case 0:
      break;
    case 2:
      base64 += '==';
      break;
    case 3:
      base64 += '=';
      break;
    default:
      throw 'Invalid base64 string';
  }
  return decodeURIComponent(atob(base64));
}

// 假设你有一个JWT
let jwt = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiIxMjM0NTY3ODkwIiwibmFtZSI6IkpvaG4gRG9lIiwiYWRtaW4iOnRydWV9.TJVA95OrM7E2cBab30RMHrHDcEfxjoYZgeFONFh7HgQ';

// 解析JWT
let jwtPayload = parseJwt(jwt);

// 使用解析后的payload
console.log(jwtPayload.iss); // 输出: jwt的签发者
console.log(jwtPayload.iat); // 输出: jwt的签发时间
相关推荐
HashTang15 分钟前
不用再配服务器了!这套 Next.js + Cloudflare 模板,一个人搞定全栈出海
前端·后端·边缘计算
Cory.眼28 分钟前
WebRTC入门指南:实时通信零基础
javascript·webrtc·实时通信
前端架构师-老李1 小时前
16 Electron 应用自动更新方案:electron-updater 完整指南
前端·javascript·electron
一只学java的小汉堡1 小时前
HTML 01入门:从概念到开发环境搭建与页面头部配置
前端·css·html
拖拉斯旋风1 小时前
📚 JavaScript 变量声明三剑客:`var`、`let`、`const` 学习笔记
javascript
用户21496515898751 小时前
从零搭建uniapp环境-记录
前端
可触的未来,发芽的智生3 小时前
追根索源:换不同的词嵌入(词向量生成方式不同,但词与词关系接近),会出现什么结果?
javascript·人工智能·python·神经网络·自然语言处理
努力写代码的熊大3 小时前
stack、queue与priority_queue的用法解析与模拟实现
java·前端·javascript
im_AMBER3 小时前
React 06
前端·javascript·笔记·学习·react.js·前端框架
wyzqhhhh4 小时前
前端常见的设计模式
前端·设计模式