Как реализовать внутреннюю систему управления правами и меню маршрутизации привилегий

Node.js JavaScript

предисловие

Эта статья следуетКак создать отчет анализа многомерной визуализации данных одним щелчком мыши на интерфейсеПоследняя статья собственно боя, основное введениеКак реализовать маршрутизацию разрешений и меню разрешений системы фонового управленияЯ надеюсь, что благодаря обзору и реальному анализу этих трех статей каждый сможет чувствовать себя более комфортно при разработке корпоративных приложений.

Основные технические моменты, затронутые в этой статье, следующие:

  • как использоватьрекурсивный алгоритмДинамически отображать меню с переменными уровнями
  • Как управлять отображением меню на основе разрешений
  • на основеnodejsДизайн службы разрешений

текст

Динамические меню и маршрутизация полномочий являются неотъемлемыми звеньями при разработке системы управления фоном.Как сложная система управления фоном, меню навигации часто не является простым меню первого уровня, а часто имеет 3-уровневые и 4-уровневые меню, как следует:Итак, наша первая проблема, которую нужно решить, — это столкнуться сМеню неизвестного уровняВо-вторых, необходимость отображать разные меню разрешений перед лицом разных ролей.Как мы решаем эти две проблемы, это первый шаг к реализации меню разрешений, а затем автор предложит вам реализовать его вместе.

использоватьрекурсивный алгоритмДинамически отображать меню с переменными уровнями

Прежде всего, давайте решим первую проблему и реализуем отрисовку меню с неопределенными уровнями.Схемы меню, которые мы сейчас используем, следующие:

const menuData = [
  {
    key: '/manage',
    path: '/manage',
    text: 'dooring工作台',
  },
  {
    key: '/manage/anazly',
    path: '/manage/anazly',
    text: '数据大盘',
  },
  {
    key: '/manage/h5',
    text: 'H5服务中心',
    sub: [
      {
        key: '/manage/h5/config',
        path: '/manage/h5/config',
        text: 'H5页面管理',
      },
      {
        key: '/manage/h5/tpl',
        path: '/manage/h5/tpl',
        text: '模板库',
      }
    ]
  },
  {
    key: '/manage/order',
    path: '/manage/order',
    text: '订单管理',
  }
]

Мы можем обойти это, реализуя алгоритм генерации данных для динамических меню, таких как для, рекурсии, рекурсивного автора здесь, чтобы достичь и выбрать компонент меню, мы можем использоватьantdизMenu, вы также можете использоватьelement UI, iViewд., принцип в принципе тот же, тут автор прямо пишет своеjavascriptРекурсивная версия:

const { SubMenu } = Menu;
const createMenu = (menu = []) => {
    return menu.map(item => {
      if(item.sub) {
        return <SubMenu key={item.key} title={item.text}>
                  { createMenu(item.sub) }
               </SubMenu>
      }else {
        return <Menu.Item key={item.key}>
                   <Link to={item.path}>{ item.text }</Link>
                 </Menu.Item>
      }
    })
 }

С помощью вышеуказанных методов мы можем визуализировать любой уровень меню, вH5-DooringЭффект в фоновом режиме выглядит следующим образом:Если нет требований к разрешению, вы можете напрямую использовать приведенную выше схему для реализации любого динамического иерархического меню.Далее мы реализуем динамическое меню с функцией разрешения.

Отображение меню управления на основе разрешений

В приведенной выше реализации мы реализовали динамические иерархические меню.Для систем с функциями управления разрешениями нам нужно отображать разные меню для разных пользователей, напримерсупер администратор, рядовой администратор, или более тонкое деление, нам нужно динамически фильтровать по разрешениям при обходе меню.Далее давайте рассмотрим пример: Интерфейс меню входа суперадминистратора:Интерфейс меню обычного входа администратора:

Прежде всего, чтобы реализовать меню разрешений, нам нужно изменить структуру схемы меню и добавить поля разрешений следующим образом:

const menuData = [
  {
    key: '/manage',
    path: '/manage',
    text: 'dooring工作台'
  },
  {
    key: '/manage/anazly',
    path: '/manage/anazly',
    text: '数据大盘',
  },
  {
    key: '/manage/auth',
    path: '/manage/auth',
    text: '会员管理',
    auth: true,
  },
  {
    key: '/manage/h5',
    text: 'H5服务中心',
    sub: [
      {
        key: '/manage/h5/config',
        path: '/manage/h5/config',
        text: 'H5页面管理',
      },
      {
        key: '/manage/h5/tpl',
        path: '/manage/h5/tpl',
        text: '模板库',
        auth: true,
      }
    ]
  }
]

Как вы можете видеть на изображении выше, мы добавилиauthПоле используется как индикатор разрешений, здесь мы в основном используемtrueа такжеfalseПредставление, потому что здесь всего 2 роли, если есть несколько разрешений, мы можем использовать специальные строки или числа для представления, это нужно только согласовать с бэкэндом.Конкретная реализация выглядит следующим образом:

const createMenu = (menu = []) => {
    return menu.map(item => {
      if(item.sub) {
        return <SubMenu key={item.key} title={item.text}>
                  { createMenu(item.sub) }
               </SubMenu>
      }else {
        if((rp === 'super' && item.auth) || !item.auth) {
          return <Menu.Item key={item.key} icon={iconMap[item.icon]}>
                   <Link to={item.path}>{ item.text }</Link>
                 </Menu.Item>
        }else {
          return null
        }
      }
    })
  }

Вышеупомянутое реализует динамический неограниченный уровеньМеню разрешений, Вы можете съесть это прямо~

на основеnodejsДизайн службы разрешений

Вышеупомянутая реализация в основном представляет собой схему проектирования на уровне интерфейса.Все мы знаем, что меры безопасности интерфейса всегда ненадежны, поэтому для обеспечения безопасности системы мы обычно сохраняем данные меню в бэкэнд и динамически запрашивать меню разрешений через интерфейс.Для этого мы можем заранее договориться с бэкэндом, и позволить бэкенду возвращаться к разным меню разрешений в зависимости от разных пользователейschemaВот и все.Поскольку схема относительно проста, автор не будет вводить их здесь по одной.Если вам интересно, то можете обратиться кH5-Dooringреализация.

Итак, ты сегодня снова эрудирован?

наконец

Автор вышеуказанного туториала был интегрирован вH5-DooringДля некоторых более сложных интерактивных функций это также может быть реализовано с помощью разумного дизайна, и вы можете исследовать и исследовать самостоятельно.

адрес гитхаба:Редактор H5H5-Dooring

Голосование с открытым исходным кодом:Проголосовать за H5-Dooring

Если вы хотите узнать больше об играх H5,webpack,node,gulp,css3,javascript,nodeJS,canvasПередовые знания и реальные сражения, такие как визуализация данных, приглашаем учиться и обсуждать вместе в разделе «Интересный интерфейс», чтобы вместе исследовать границы интерфейса.

больше рекомендаций

Категории