У каждого свое мнение о том, как организовать маршруты в одностраничном приложении - мы не разные 😀.
Поскольку мы используем 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
Что дальше
Мы, вероятно, изменим и, надеюсь, улучшим настройку роутера в ближайшие месяцы, и я постараюсь рассказать, как мы изменили настройку и почему. А пока этот простой пример может помочь вам начать работу.