vue当中的jwt使用方式

坚决不能使用jsonwebtoken库，否则会出现类似cannot read properties of undefined reading 'from'的错误。

这个库通常用于nodejs后端的jwt校验签名等工作。

可以使用jose库来实现前端页面的jwt校验。

可以参考如下代码实现：

import { jwtVerify } from 'jose';

const STORAGE_KEY = 'jwt_payload';
const TOKEN_KEY = 'jwt_token';

/**
 * 仅解析 Token，不会修改 localStorage
 */
async function parseToken(token, secret = null) {
  let decoded;
  if (!token) throw new Error('Token is empty');

  if (secret) {
    const encoder = new TextEncoder();
    const { payload } = await jwtVerify(token, encoder.encode(secret));
    decoded = payload;
  } else {
    const payloadBase64 = token.split('.')[1];
    if (!payloadBase64) throw new Error('Invalid token format');
    decoded = JSON.parse(atob(payloadBase64.replace(/-/g, '+').replace(/_/g, '/')));
  }
  return decoded;
}

/**
 * 设置 Token（会解析并保存到 localStorage）
 */
async function setToken(token, secret = null) {
  const decoded = await parseToken(token, secret);
  localStorage.setItem(TOKEN_KEY, token);
  localStorage.setItem(STORAGE_KEY, JSON.stringify(decoded));
}

/**
 * 获取 Token
 */
function getToken() {
  return localStorage.getItem(TOKEN_KEY) || null;
}

/**
 * 清除 Token 和解析结果
 */
function clearToken() {
  localStorage.removeItem(TOKEN_KEY);
  localStorage.removeItem(STORAGE_KEY);
}

/**
 * 获取已解析的 Payload（直接从 localStorage 读）
 */
function getDecodedToken() {
  const raw = localStorage.getItem(STORAGE_KEY);
  return raw ? JSON.parse(raw) : null;
}

function getAuthList() {
  const payload = getDecodedToken();
  return payload?.auths ?? [];
}

function isUserHasAuth(auth) {
  return getAuthList().includes(auth);
}

function getRoleList() {
  const payload = getDecodedToken();
  return payload?.roles
    ?.map(role => role.roleName)
    .filter(name => typeof name === 'string') ?? [];
}

function isUserInRole(roleName) {
  return getRoleList().includes(roleName);
}

export {
  parseToken,
  setToken,
  getToken,
  getDecodedToken,
  clearToken,
  getAuthList,
  isUserHasAuth,
  getRoleList,
  isUserInRole
};