嘿，这个需求其实挺常见的，我来给你捋清楚步骤和具体实现思路～

第一步：先把登录获取到的权限存起来 #

首先，你得确保登录成功后，把WebService返回的JSON权限数组存到一个全局可访问的地方，这样其他函数才能拿到。不同场景的存储方式不一样：

• 如果是前端（比如JavaScript），可以存在sessionStorage/localStorage，或者框架的状态管理工具里（比如Vuex、Redux）
• 如果是后端（比如Java/Python），可以存在用户会话（Session）里，或者当前用户的对象属性中

举个JavaScript的登录函数例子，顺便完成权限存储：

async function login(username, password) {
  // 调用WebService接口
  const response = await fetch('/api/login', {
    method: 'POST',
    body: JSON.stringify({ username, password })
  });
  const result = await response.json();
  
  // 登录成功后，把权限数组存到sessionStorage（临时存储，关闭浏览器就清空）
  if (result.success) {
    sessionStorage.setItem('userPermissions', JSON.stringify(result.permissions));
    return true;
  }
  return false;
}

第二步：创建展示权限的函数 #

接下来就可以写专门的函数，读取存储的权限，然后根据你的需求展示出来。下面给几个常见场景的例子：

例子1：控制台打印所有权限（调试/后端日志用） #

function showUserPermissions() {
  // 从存储中取出权限数组
  const permissionsStr = sessionStorage.getItem('userPermissions');
  if (!permissionsStr) {
    console.log('用户未登录或无权限信息');
    return;
  }
  
  const permissions = JSON.parse(permissionsStr);
  console.log('当前用户的权限列表：');
  // 分情况处理：如果权限是字符串数组，直接打印；如果是对象数组，取对应字段
  permissions.forEach((perm, index) => {
    if (typeof perm === 'string') {
      console.log(`${index + 1}. ${perm}`);
    } else {
      // 假设权限对象结构是 {id: 1, name: "查看仪表盘", code: "view_dashboard"}
      console.log(`${index + 1}. 权限名称：${perm.name}，权限码：${perm.code}`);
    }
  });
}

例子2：在页面上渲染权限列表（前端展示用） #

function renderPermissionsToPage() {
  const permissionsStr = sessionStorage.getItem('userPermissions');
  const container = document.getElementById('permissions-container');
  
  if (!permissionsStr) {
    container.innerText = '暂无权限信息，请先登录';
    return;
  }
  
  const permissions = JSON.parse(permissionsStr);
  // 清空容器后重新渲染
  container.innerHTML = '';
  
  // 添加标题
  const title = document.createElement('h3');
  title.textContent = '当前用户权限';
  container.appendChild(title);
  
  // 生成权限列表
  const list = document.createElement('ul');
  permissions.forEach(perm => {
    const listItem = document.createElement('li');
    listItem.textContent = typeof perm === 'string' ? perm : `${perm.name} (${perm.code})`;
    list.appendChild(listItem);
  });
  container.appendChild(list);
}

第三步：调用展示函数 #

你可以在需要的地方触发这个函数，比如：

// 登录成功后直接调用
login('admin', '123456').then(success => {
  if (success) {
    showUserPermissions(); // 控制台打印
    renderPermissionsToPage(); // 页面渲染
  }
});

// 或者给按钮绑定点击事件，手动触发
document.getElementById('show-perms-btn').addEventListener('click', showUserPermissions);

额外注意事项 #

• 一定要处理未登录或权限为空的情况，避免出现JSON解析错误
• 如果是后端场景（比如Java），可以把权限存在HttpSession里，在需要的Service/Controller中取出遍历，比如返回给前端或者打印日志
• 权限数组如果是复杂结构，记得根据实际字段调整展示逻辑

内容的提问来源于stack exchange，提问作者user9173081