Две схемы реализации динамического меню при раздельной разработке фронтенда и бэкенда

Spring Boot
Две схемы реализации динамического меню при раздельной разработке фронтенда и бэкенда

Что касается проблемы обработки разрешений при разработке разделения внешнего и внутреннего интерфейса, Сонг Гэ написал статью, чтобы обсудить этот вопрос с вами:

Но в последнее время у некоторых друзей все еще есть сомнения по поводу динамического меню, когда они изучают проект микроперсонала (то есть разные пользователи будут видеть разные пункты меню после успешного входа в систему), поэтому Сонгге планирует написать еще одну статью, чтобы пообщаться с вами. Проблема динамического меню при разработке разделения front-end и back-end.

1. Принцип

При управлении разрешениями основная идея состоит в том, чтобы управлять разрешениями на серверной части. Вся работа, выполняемая внешним интерфейсом, предназначена только для улучшения взаимодействия с пользователем. Мы не можем полагаться на внешний интерфейс для отображения или скрытия кнопки для обеспечения контроля разрешений. , что точно небезопасно.

Точно так же, как когда пользователю необходимо ввести адрес электронной почты при регистрации, после внешней проверки все еще необходимо проверить внутреннюю часть.Две цели проверки различаются.Внешняя проверка предназначена для повышения скорости ответа и оптимизировать взаимодействие с пользователем, а внутренняя проверка должна обеспечить целостность данных. То же самое верно для управления правами, кнопки интерфейса展示/隐藏Это все просто для улучшения взаимодействия с пользователем, а реальное управление разрешениями должно быть реализовано бэкэндом.

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

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

2. Конкретная реализация

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

Динамическое меню — это меню, которое видит пользователь после входа в систему.После успешного входа пользователя, не использующего роль, он увидит неиспользуемые пункты меню.Как реализовать это динамическое меню? В целом есть две разные схемы.В проектах Сонгге также использовались обе схемы.Здесь я поделюсь ими с вами.

2.1 Внутренний динамический возврат

Серверная часть возвращается динамически, и это решение, которое я принял в Micro Personnel. В Micro Personnel есть пять таблиц, связанных с управлением полномочиями, а именно:

вhrТаблица является пользовательской таблицей.После того, как пользователь успешно войдет в систему, можно запросить роль пользователя, а затем запрашиваются меню (ресурсы), с которыми пользователь может работать, в соответствии с ролью пользователя, а затем эти рабочие ресурсы организованы в Данные JSON и возвращаются во внешний интерфейс, а внешний интерфейс отображает соответствующее меню на основе этого JSON. Взяв в качестве примера Micropersonnel, формат данных JSON, который мы возвращаем, выглядит следующим образом:

[
    {
        "id":2,
        "path":"/home",
        "component":"Home",
        "name":"员工资料",
        "iconCls":"fa fa-user-circle-o",
        "children":[
            {
                "id":null,
                "path":"/emp/basic",
                "component":"EmpBasic",
                "name":"基本资料",
                "iconCls":null,
                "children":[

                ],
                "meta":{
                    "keepAlive":false,
                    "requireAuth":true
                }
            }
        ],
        "meta":{
            "keepAlive":false,
            "requireAuth":true
        }
    }
]

Такой JSON можно использовать после вторичной обработки во внешнем интерфейсе.Вторичная обработка внешнего интерфейса в основном преобразует строковое значение атрибута компонента в объект. Для конкретной работы этой части вы можете обратиться к проекту микроперсонала (в частности:https://github.com/lenve/vhr/blob/master/vuehr/src/utils/utils.js), не буду повторяться.

Одним из преимуществ этого метода является то, что интерфейсная часть имеет меньше логики оценки, а внутренняя часть не слишком сложна. Это операция SQL. Интерфейсная часть получает данные меню, возвращаемые серверной частью, и может использоваться сразу после небольшой обработки. Еще одним преимуществом этого подхода является возможность динамической настройки.роль ресурсатак же какроль пользователяОтношения между ними, а затем настроить ресурсы (меню), что пользователь может работать.

2.2 Внешний динамический рендеринг

Другой способ — динамический рендеринг во внешнем интерфейсе.Таким образом, внутренняя работа упрощается, а обработка во внешнем интерфейсе доставляет немного больше хлопот.В конце прошлого года Сонг Гэ помогал юридической фирме.Система управления , поскольку разрешения относительно просты, я принял этот метод схемы.

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

[
    {
        "id":2,
        "path":"/home",
        "component":Home,
        "name":"员工资料",
        "iconCls":"fa fa-user-circle-o",
        "children":[
            {
                "id":null,
                "path":"/emp/basic",
                "component":EmpBasic,
                "name":"基本资料",
                "iconCls":null,
                "children":[

                ],
                "meta":{
                    "keepAlive":false,
                    "requireAuth":true,
                    "roles":['admin','user']
                }
            }
        ],
        "meta":{
            "keepAlive":false,
            "requireAuth":true
        }
    }
]

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

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

3. Заключение

Хотя я использовал первый метод в Micro Personnel, но если небольшой партнер — это новый проект и проблема с разрешениями не очень сложна, я все же рекомендую попробовать второй метод, который более удобен.

Однако в компании, вне зависимости от того, создается ли динамическое меню во внешнем интерфейсе или во внутреннем, может существовать процесс коммуникации (si) и коммуникации (bi) между фронтенд- и бэкенд-командами. партия может написать на несколько строк кода меньше.

Обратите внимание на общедоступную учетную запись [Jiangnan A Little Rain], сосредоточьтесь на технологиях с полным стеком, таких как Spring Boot + микросервисы и разделение интерфейса и сервера, делитесь регулярными видеоуроками, отвечайте на Java после того, как уделите внимание, и получайте Сухие товары Java тщательно приготовлены Songge для вас!