Промежуточное ПО - это старая и мощная концепция, которую мы используем при разработке программного обеспечения, она действительно полезна, когда в наших приложениях есть шаблоны, связанные с маршрутизацией.
Если вы не уверены в значении промежуточного программного обеспечения, существует Простое объяснение промежуточного программного обеспечения Express, которое может помочь вам узнать больше о том, как они работают (по крайней мере, в Express и Node, но концепция та же ).
Но разве это только для бэкэнда? Нет, на самом деле это очень распространено в обоих (интерфейс или бэкэнд), когда у вас есть маршрутизация в вашем приложении, и мы используем эту концепцию с тех пор, как в нашей жизни появились одностраничные приложения.
И… нужно ли это моему SPA-сайту?
Вот несколько примеров, которые могут объяснить, когда можно использовать промежуточное ПО:
- Не позволяйте пользователям, которые не вошли на ваш сайт, посещать страницы.
- Разрешить только определенным типам пользователей просматривать страницу (роли: администратор, редактор и т. Д.)
- Аналитика.
- Сбросить настройки или очистить хранилище.
- Разрешить доступ к странице только зарегистрированным пользователям старше определенного возраста.
И некоторые другие…
Мне это очень нужно! Как я могу использовать с Vue?
Благодаря Vue Router это будет очень просто! Потому что в этом плагине реализована аналогичная концепция под названием Navigation Guards.
Navigation Guards действительно хороши и позволяют нам вызывать функцию перед входом в маршрут, перед его обновлением и перед уходом.
… Или вы можете использовать глобальную стражу.
Но иногда нам нужно более одного промежуточного программного обеспечения для одного и того же маршрута, мы можем решить проблему с помощью пакета Vue Router Multiguard. Это позволяет нам установить ряд охранников, как здесь.
На этом этапе вы можете начать понимать, что перейти от этого к использованию настоящего промежуточного программного обеспечения будет легко, давайте рассмотрим упрощенный пример:
Сначала мы определяем фиктивного пользователя, представляя, что у вас есть служба, глобальное состояние или что-то, что возвращает вам текущего пользователя.
Теперь мы можем создать наш настоящий пример с промежуточным программным обеспечением:
Было действительно просто, все кусочки были на месте, осталось только их соединить 🤙
А вы? Как вы используете промежуточное ПО с Vue?
Бонус: у Vue Router также есть In Component Guards, с помощью которых очень удобно получать данные перед входом на страницу.
Бонус 2: если вы прочтете документацию, то обнаружите, что можете передать следующий маршрут функции next (), например, для перенаправления на следующий вход (‘/ login’)