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

Если вы не уверены в значении промежуточного программного обеспечения, существует Простое объяснение промежуточного программного обеспечения Express, которое может помочь вам узнать больше о том, как они работают (по крайней мере, в Express и Node, но концепция та же ).

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

И… нужно ли это моему SPA-сайту?
Вот несколько примеров, которые могут объяснить, когда можно использовать промежуточное ПО:

  • Не позволяйте пользователям, которые не вошли на ваш сайт, посещать страницы.
  • Разрешить только определенным типам пользователей просматривать страницу (роли: администратор, редактор и т. Д.)
  • Аналитика.
  • Сбросить настройки или очистить хранилище.
  • Разрешить доступ к странице только зарегистрированным пользователям старше определенного возраста.

И некоторые другие…

Мне это очень нужно! Как я могу использовать с Vue?

Благодаря Vue Router это будет очень просто! Потому что в этом плагине реализована аналогичная концепция под названием Navigation Guards.

Navigation Guards действительно хороши и позволяют нам вызывать функцию перед входом в маршрут, перед его обновлением и перед уходом.

… Или вы можете использовать глобальную стражу.

Но иногда нам нужно более одного промежуточного программного обеспечения для одного и того же маршрута, мы можем решить проблему с помощью пакета Vue Router Multiguard. Это позволяет нам установить ряд охранников, как здесь.

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

Сначала мы определяем фиктивного пользователя, представляя, что у вас есть служба, глобальное состояние или что-то, что возвращает вам текущего пользователя.

Теперь мы можем создать наш настоящий пример с промежуточным программным обеспечением:

Было действительно просто, все кусочки были на месте, осталось только их соединить 🤙

А вы? Как вы используете промежуточное ПО с Vue?

Бонус: у Vue Router также есть In Component Guards, с помощью которых очень удобно получать данные перед входом на страницу.

Бонус 2: если вы прочтете документацию, то обнаружите, что можете передать следующий маршрут функции next (), например, для перенаправления на следующий вход (‘/ login’)