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的签发时间
相关推荐
不想吃饭e19 小时前
在uniapp/vue项目中全局挂载component
前端·vue.js·uni-app
非凡ghost20 小时前
AOMEI Partition Assistant磁盘分区工具:磁盘管理的得力助手
linux·运维·前端·数据库·学习·生活·软件需求
UrbanJazzerati20 小时前
前端入门:margin居中、border、box-radius、transform、box-shadow、mouse事件、preventDefault()
前端·面试
蝎子莱莱爱打怪20 小时前
🚀🚀🚀嗨,一起来开发 开源IM系统呀!
前端·后端·github
Enddme20 小时前
《前端笔试必备:JavaScript ACM输入输出模板》
前端·javascript·面试
前端鱼20 小时前
前端面试中值得关注的js题
前端·面试
UnnamedOrange20 小时前
有来前后端部署
前端·后端
力Mer20 小时前
全排列-遇到的深浅拷贝问题
javascript
德育处主任20 小时前
p5.js 绘制 3D 椭球体 ellipsoid
前端·javascript·数据可视化
未来之窗软件服务20 小时前
未来之窗昭和仙君 (四) 前端网页分页 — 东方仙盟筑基期
前端·仙盟创梦ide·东方仙盟·东方仙盟修仙·昭和仙君