У каждого свое мнение о том, как организовать маршруты в одностраничном приложении - мы не разные 😀.

Поскольку мы используем Vue.js в нашем текущем проекте, мы также используем Vue Router.

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

Структура папки

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

Текущая структура папок, которую мы используем, довольно проста:

  • index.js- определяет beforeEach логику для маршрутов
  • /routes/public.js - содержит все общедоступные маршруты (например, /, /login, /registration и т. Д.)
  • /routes/private.js - есть все маршруты для аутентифицированного пользователя
  • /routes/index.js - просто объединяет все маршруты public и private и экспортирует их

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

SRC / маршрутизатор / index.js

index.js содержит только один root маршрут (можно обойтись и без него). В нашем случае это dashboard маршрут, на который пользователь перенаправляется после аутентификации.

Итак, самая важная часть index.js это проверка beforeEach.

В нашем приложении есть два типа маршрутов:

  • строго public - вы должны выйти из системы, чтобы посетить их
  • private - вы должны пройти аутентификацию, чтобы посетить их

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

  • onlyLoggedOut - маршрут может посетить только неаутентифицированный пользователь
  • isPublic - это общедоступный маршрут, и его можно посещать без аутентификации (/login, /registration и т. Д.)

Есть только два случая (мы хотим, чтобы вначале было проще):

  • !isPublic && !authenticated - пользователь не authenticated, но пытается получить доступ к private маршруту - он / она будет перенаправлен на /login страницу и будет перенаправлен на страницу, к которой он пытался получить доступ, после успешной аутентификации
  • authenticated && onlyLoggedOut - пользователь authenticated, но пытается получить доступ к public странице - он будет перенаправлен обратно на dashboard

SRC / маршрутизатор / маршруты / public.js

Мы думали разбить маршруты и поместить каждый из них в отдельный файл, но, ммм, может быть, позже :).

Итак, все общедоступные маршруты находятся в одном файле, и все они содержат одно и то же поле meta:

meta: {
  public: true,
  onlyLoggedOut: true
}

Чтобы не загрязнять каждый маршрут, мы добавляем поле meta ко всем маршрутам в файле в разделе export. Таким образом, нам не нужно думать о добавлении поля meta к каждому новому добавленному маршруту.

SRC / маршрутизатор / маршруты / private.js

Вы уже знаете упражнение. Все частные маршруты находятся в одном файле, и поле meta добавляется к каждому из них и к одному из них в разделе export.

SRC / маршрутизатор / маршруты / index.js

Что внутри routes/index.js, спросите вы. Это просто служебный файл, который импортирует маршруты из public.js и private.js и экспортирует их как один.

В этом файле нет необходимости, вы можете просто импортировать маршруты public и private прямо в src/router/index.js

Что дальше

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