前端基于角色的权限管理的字段设计

706 阅读1分钟

前端在开发中如果有遇到后台只返回角色,不返回权限的情况下。

需要前端来设计权限管理。 下面是我给出的方案,和流程图

WeChat635dc2e6ac8a0961c42ae7b24c2be489.png

export default {
  // 超级管理员
  superAdmin: {
    God:true, // 上帝模式,不限制任何权限
  },

  // 管理员
  admin: {
    // 路由权限
    role: ['admin', 'super_editor'],
    // 公用菜单权限
    menus:{
      edit:{
        show: true, // 是否可以显示
        handle: false // 是否可以操作
      },
      super_editor:{
        show: true, // 是否可以显示
        handle: false // 是否可以操作
      }
    },
    // 页面按钮权限
    pages: {
      editButton: {
        show: true, // 是否可以显示
        handle: false // 是否可以操作
      }
    }
  },

  // 操作者
  operational: {
    // 路由权限
    role: ['index'],
    // 公用菜单权限
    menus: {
      edit:{
        show: true, // 是否可以显示
        handle: false // 是否可以操作
      }
    }
  },

  // 来宾用户
  guest: {
    // 路由权限
    role: ['index'],
    // 公用菜单权限
    menus: ['list'],
  },

  // 未登录用户
  anonymity: {

  }
}