Cómo realizar el enrutamiento de autoridad y el menú de autoridad del sistema de gestión en segundo plano

Maravillosa reseña

• Cómo realizar la vista previa en tiempo real del editor visual H5 y la función de vista previa del código de escaneo de la máquina real

• Introducción al desarrollo de IDE en línea: implementación de un editor de código en línea desde cero

• Un editor visual para páginas h5 basado en React + Koa-Dooring

• Resumen de los puntos de conocimiento básicos de TS y análisis de casos de proyectos reales

Prefacio

Este artículo es el  último artículo después del combate real sobre cómo generar informes de análisis de visualización de datos multidimensionales con un solo clic en la  interfaz . Principalmente presenta cómo implementar el enrutamiento de autoridad y el menú de autoridad del sistema de gestión en segundo plano. Espero que a través de la revisión y el combate real de estos 3 artículos, puedas permitir que todos Es más cómodo desarrollar aplicaciones empresariales.

Los principales puntos técnicos involucrados en este artículo son los siguientes:

• Cómo utilizar un algoritmo recursivo para renderizar menús dinámicamente con niveles indefinidos

• Cómo controlar la visualización del menú según los permisos

• Diseño de servicio de permisos basado en nodejs

texto

Los menús dinámicos y el enrutamiento de permisos son enlaces indispensables en el diseño de sistemas de administración de back-end. Como un sistema de administración de back-end complejo, el menú de navegación a menudo no es un simple menú de primer nivel. A menudo hay menús de 3 y 4 niveles, de la siguiente manera:   así que somos los primeros El problema a resolver es la solución de front-end al enfrentarse al menú de nivel desconocido. El segundo es enfrentar diferentes roles y necesitar mostrar diferentes menús de permisos. Cómo resolvemos estos dos problemas es el primer paso para realizar el menú de permisos. A continuación, haré Llevará a todos a lograrlo juntos.

Utilice un algoritmo recursivo para representar dinámicamente menús con niveles indefinidos

En primer lugar, vamos a resolver el primer problema, para realizar la representación de niveles indefinidos de menús. Nuestros esquemas de menú de uso común actuales son los siguientes:

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: '订单管理',
  }
]

复制代码

Podemos atravesar estos datos para generar menús dinámicos implementando un algoritmo js, ​​como for, recursividad, etc. El autor usa la recursividad para lograr esto. En cuanto a la selección de componentes del menú, podemos usar el Menú de antd, o el elemento UI, iView, etc. El principio es básicamente el mismo, aquí el autor escribe directamente mi versión recursiva de 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>
      }
    })
 }

复制代码

A través del método anterior, podemos renderizar cualquier menú de nivel. El efecto en el fondo H5-Dooring es el siguiente:   Si no hay un requisito de permiso, puede usar directamente el esquema anterior para implementar cualquier menú de nivel dinámico. A continuación, realizaremos la función dinámica con permiso menú.

Visualización del menú de control según los permisos

En la implementación anterior, hemos implementado menús jerárquicos dinámicos. Para sistemas con funciones de administración de autoridad, necesitamos mostrar diferentes menús para diferentes usuarios, como superadministradores, administradores ordinarios o divisiones más detalladas, necesitamos atravesar el menú Cuando llegue el momento de filtrar dinámicamente según los permisos, veamos un ejemplo: La interfaz de menú para el inicio de sesión de superadministrador: La interfaz de menú para el   inicio de sesión de administrador normal: 

En primer lugar, para implementar el menú de permisos, necesitamos modificar la estructura del esquema del menú y agregar campos de permisos de la siguiente manera:

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,
      }
    ]
  }
]

复制代码

La figura anterior muestra que hemos agregado el campo auth como la marca de autorización. Aquí usamos principalmente verdadero y falso para indicar, porque aquí solo hay 2 roles. Si hay múltiples permisos, podemos usar una cadena o número especial para indicar que este bloque solo necesita ir seguido de El acuerdo final es bueno. La implementación específica es la siguiente:

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
        }
      }
    })
  }

复制代码

Lo anterior se ha dado cuenta del menú dinámico e ilimitado de nivel de autoridad. Puedes comerlo directamente ~

Diseño de servicio de permisos basado en nodejs

La implementación anterior es principalmente una solución de diseño de front-end. Todos sabemos que las medidas de seguridad de front-end siempre son poco confiables. Por lo tanto, para garantizar la seguridad del sistema, generalmente almacenamos los datos del menú en el back-end y solicitamos dinámicamente el menú de permisos a través de la interfaz. Podemos hacer un acuerdo con el back-end por adelantado, de modo que el back-end pueda regresar a diferentes esquemas de menú de permisos según los diferentes usuarios. Dado que el esquema es relativamente simple, no los presentaré uno por uno aquí. Si está interesado, consulte H5-Dooring lograr.

Entonces, ¿estás bien informado hoy?

Al final

El autor del tutorial anterior se ha integrado en H5-Dooring. Para algunas funciones interactivas más complejas, también se puede realizar mediante un diseño razonable. Puede explorar y estudiar usted mismo.

Dirección de github: H5 editor H5-Dooring

Si desea obtener más información sobre juegos H5, webpack, node, gulp, css3, javascript, nodeJS, visualización de datos de lienzo y otros conocimientos de front-end y combate real, bienvenido a estudiar y discutir juntos en "Interesting Frontend" para explorar juntos el límite de front-end.

Haga clic en la esquina inferior izquierda para leer el texto original y votar por H5-Dooring !