Я нарисовал 5 картинок, чтобы помочь вам легко победить динамическую маршрутизацию разрешений!

👨‍💻 Предисловие

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

⁉️ Что такое управление разрешениями

Так называемое управление правами, как следует из названия,Ограничение мощности, люди с разной силой могут делать разные вещи.
Если вы вышли за пределы, извините, операция недействительна.
И управление правами в нашей системе управления фоном такое же, суперадминистратор точно может больше, чем администратор, а это事情На самом деле, это видно из нашего интерфейсаЭто то, какая страница отображается и какие кнопки операций отображаются..
Затем мы думаем по очереди, поэтому цель нашего внешнего интерфейса состоит в том, чтобыДинамически управлять отрисовкой страницы и отрисовкой кнопок в зависимости от людей с разными разрешениями, то что мы судим?Таблица разрешений, часть этой таблицы разрешениймассив разрешений, некоторые из них являются предварительно указанными разрешениями для разных ролей, возвращаяРольЧтобы отличить, конкретное должно взаимодействовать с серверной частью.
Когда самое подходящее время для получения этой таблицы разрешений, это, несомненно, время для входа в систему, поэтому наш процесс, вероятно, выглядит следующим образом:
- Войдите в систему, чтобы получитьtoken
- согласно сtokenПолучить информацию о пользователе (Таблица разрешенийЖдать)
- согласно сТаблица разрешенийДинамически добавляйте интерфейсную маршрутизацию и другую информацию, чтобы разные люди могли видеть разные страницы.

❣️ Как маршрутизация является динамической

Мы знаем разрешения для ограничения отображения и перехода на разные страницы, так как же мы можем контролировать переход на страницу? да, дамаршрутизация.
Каждый раз, когда мы заходим на другую страницу, по сути, это ввод разных маршрутов, тогда мы можем ее использовать.охранник маршрутаввести некоторые эксплуатационные ограничения.
Мы можем судить здесьcookieСуществует лиtoken, если нет, он перейдет на страницу входа, чтобы войти, чтобы получитьtokenи разрешения.
Можем собрать под властью таблицы маршрутизации(О сборке таблицы маршрутизации будет рассказано ниже)затем черезrouter.addRoutesДобавьте маршруты и сохраните эту информацию вvuexВнутри нашtabbarБоковые панели и т. д. могут быть оформлены, отображены или скрыты на основе этой информации.
Грубо говоря, наши действия по динамической маршрутизации, вероятно, будут такими:
- мы проходимПерехват перед переходом по маршрутуОценка статуса входа
- Если вы вошли в систему, отпустите ее, если вы не вошли в систему, войдите в систему иХраните различные разрешения и информацию
- Сборка маршрута на основе этих разрешенийУлучшить нашу интерфейсную маршрутизацию

动态路由.png

💗 Где проходит маршрут

Теперь мы все знаем, что делать это нужно через разрешения, возвращаемые бэкендом.таблица маршрутизациисборка, а затем пройтиrouter.addRoutesДобавьте маршрут, затем наштаблица маршрутизацииНа самом деле, для разных проектов существуют разные способы хранения.

на передней

помещатьуправление передним концомКлассический случай — крупный мужчина в штанах с цветочным принтом.vue-element-admin, я считаю, что маршрутизация авторитета большинства людей - это дверь, чтобы увидеть цветочные штаны, здесь я не буду писать слишком много исходного кода, если вам это нужно, вы можете попробовать его сами.
Возвращаясь к теме, таблица маршрутизации размещена во фронтенде, то есть мы находимся в файле типаrouter.jsСначала определите все возможные маршруты:

/** router.js **/
export let Routes = [{
    path: '/',
    redirect: '/home/index'
  },
  {
    path: '/home',
    component: layout,
    redirect: '/home/index',
    meta: { roles: 'home' },
    children:[
        ...
    ]
   }
]

Каждый определенный маршрут должен быть добавленmetaМетаинформация маршрутизации для представления разрешений, необходимых для этого маршрута, черезmetaСопоставьте с таблицей разрешений.
А затем получить окончательную таблицу маршрутизации, и эта таблица маршрутизации — то, что нам нужно.router.addRoutesмаршрут.
Передача его внешнему элементу управления просто делает одну вещь, через разрешения пользователя и предыдущийrouter.jsСопоставьте разрешения, требуемые каждой страницей в нем, и, наконец, верните список маршрутов, к которым может получить доступ пользователь.
Конечно на передПреимущества и недостаткиЭто также:
- четкая логикаКода не так много, и новичок лучше его поймет и будет легче начать работу.
- утомительно писатьХотя таблица маршрутизации определена во внешнем интерфейсе, она жестко запрограммирована.Каждый раз, когда модуль добавляется или изменяется, он не может быть изменен динамически и может быть изменен только во внешнем интерфейсе.

на заднем конце

Есть также много примеров на серверной части.Сейчас многие системы управления с открытым исходным кодом имеют систему разрешений динамической маршрутизации, которая взаимодействует с интерфейсом и серверной частью.ЗоиНу давай же.
Во-первых, во внешнем интерфейсе будет базовая таблица маршрутизации, которая будет содержать несколько начальных страниц, включая фиксированные布局页面,404页面:

// 前端未找到页面路由
const notFoundRouter = {
  path: '*',
  redirect: '/404',
  hidden: true
}
// 根级菜单
const rootRouter = {
  key: '',
  name: 'index',
  path: '',
  component: 'BasicLayout',
  redirect: '/index',
  meta: {
    title: ''
  },
  children: []
}

Начальные страницы разных проектов тоже разные, эти страницы в основном неизменны, основное внимание уделяется тому, как мы можем динамически добавлять маршруты наших страниц в эту таблицу маршрутизации.
мы проходимtokenИли тому подобное интерфейс бэкэнда к просьбам маршрута, которые обычно возвращают время路由json, поскольку наша таблица маршрутизации является объектом, нам нужно обработать окончательную таблицу маршрутизации во внешнем интерфейсе.
А затем получить окончательную таблицу маршрутизации, и эта таблица маршрутизации — то, что нам нужно.router.addRoutesмаршрут.
Сдать на бэкэнд управление, грубо говоря, т. е. вернуть все路由jsonМы делаем сшивание, чтобы добавить к маршрутизации элемента, и они являются динамическими.
Конечно, я также расскажу о преимуществах и недостатках передачи на бэкенд-контроль:
- достаточно динамичныйКак правило, такая система будет иметь управление из меню, мы можем динамически менять маршрут, настраивая меню онлайн, что намного удобнее, чем прописывать мертвые маршруты на фронтенде.
- Достаточно безопасноПоскольку таблица маршрутизации в конце концов поддерживается в базе данных, она должна быть более или менее безопаснее, чем во внешнем интерфейсе.
- Сложность пониманияДля новичков, которые только начинают работать с динамической маршрутизацией, будет немного сложно напрямую читать исходный код отличных проектов с открытым исходным кодом.

🙋‍♂️ Теперь я знаю

Что ж, теперь мы знаем модуль динамической маршрутизации разрешений, который передается через权限表 + 路由表реализовать.
Так что нам просто нужно выяснитьдва элементаХорошо, в настоящее времяРазрешения ролей (таблица разрешений),а такжеполная таблица маршрутизации. Обычно ролевые разрешения возвращаются серверной частью, что является не чем иным, как вопросом о том, где находится полная таблица маршрутизации.Я также упомянул два способа сборки таблицы маршрутизации выше.Вы можете выбрать метод, который подходит вам в соответствии с потребностями. проекта.
После того, как мы снова проработали логику, если кто-то спросит вас о вашемКак работает маршрутизация разрешений?, можно уверенно ответить так:
- В разных проектах будут разные способы обработки, но главное, что есть два элементаРазрешения ролей (таблица разрешений)а такжеполная таблица маршрутизации.
- разрешениеНет сомнения, что он возвращается через бэкенд интерфейса, и это не что иное, какГде находится таблица маршрутизации.
- но яЛогика этого проектаДа,Таблица маршрутизации и таблица разрешенийВсе правки добавляются в фоне управления. После входа в систему бэкэнд возвращает имя персонажаСписок разрешений и таблица маршрутизации, а затем строить маршруты и меню на основе этих данных.
Достаточно сказать это уверенно, помните, чтобы не говорить лишнего, потому что онСпросите подробности, тогда просто вспомните мой вышенесколько фотографийВот и все~

路由总览 (1).png

👉 Ссылка

vue-element-admin

Рука об руку, вы попадете на задний план с vue series 2 (разрешение на вход)

Интерфейсное управление динамической маршрутизацией или внутреннее управление? (с кодом)

👋 Напишите в конце

Во-первых, я очень рад, что вы дочитали до этого места.5 изображенийчтобы помочь вам победить легкоДинамическая маршрутизация разрешений, я надеюсь быть полезным.
Если вы считаете эту статью полезной, пожалуйста,🍉 Подписаться + Сидеть + Сбор + Обзор + ПересылкаПоддержите~~😛Ваша поддержка - самая большая мотивация для моего обновления.

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

🌅 Прекрасное прошлое

Чтобы выпить еще две чашки чая с молоком☕, я написал скрипт автоматизации для своего проекта

Кнопка «Вода» 💧

Менеджер по продукту: Можете ли вы заставить облако слов двигаться?

Одна статья, чтобы выделить карусель карты echarts ⚡