Как открыть vue в браузере
Vue.js изначально разрабатывался быть инкрементально адаптируемым. Это значит, что он может быть интегрирован в проект несколькими способами, в зависимости от требований.
Есть четыре основных способа добавления Vue.js в проект:
- Импорт CDN пакета на странице
- Скачивание файлов JavaScript и их самостоятельный хостинг
- Установка с использованием npm
- Использование официального CLI для развёртывания проекта, предоставляющего продвинутые инструменты для создания современного рабочего процесса разработки фронтенда (например, горячая перезагрузка, линтинг при сохранении и многое другое).
Подробная история изменений для каждой версии доступна на GitHub
На данный момент в бета-тестировании — интеграция с Vuex и Router в разработке
При использовании Vue рекомендуем установить расширение Vue Devtools
(opens new window) для браузера, которое позволит легче проверять и отлаживать приложения на Vue в удобном интерфейсе.
Для прототипов и в обучающих целях можно использовать последнюю версию с CDN:
Для production рекомендуется указывать конкретную версию и сборку, чтобы избежать неожиданных поломок при выходе новых версий.
Если нужно избежать использования систем сборки, но нет возможности использовать CDN в production — в таком случае можно скачать соответствующий .js файл и разместить его на собственном веб-сервере. После чего подключать его, с помощью тега , точно также, как и при подключении с CDN.
Можно просматривать и скачивать файлы с CDN, например unpkg
(opens new window) . Различия файлов сборок подробнее объясняются ниже, но обычно потребуется загрузить обе сборки: для разработки и для production.
npm — рекомендованный способ установки при создании больших приложений на Vue. Он прекрасно сочетается с системами сборки, такими как webpack
Также Vue предоставляет инструменты для создания однофайловых компонентов (также именуемых как SFC). Если хотите их использовать, то также потребуется установить @vue/compiler-sfc :
Обратите внимание, если выполняете миграцию с Vue 2, то @vue/compiler-sfc заменяет используемый ранее vue-template-compiler .
Кроме @vue/compiler-sfc также понадобится подходящий загрузчик SFC или плагин для системы сборки. Более подробную информацию можно найти в разделе про однофайловые компоненты.
В большинстве случаев предпочтительным способом создания сборки с webpack и минимальной конфигурацией будет использование Vue CLI.
(opens new window) для быстрого создания каркаса одностраничных приложений (SPA). Предлагаемые шаблоны содержат всё необходимое для организации современной фронтенд-разработки. За несколько минут можно получить работающую конфигурацию с горячей перезагрузкой модулей, линтингом кода при сохранении и настроенной конфигурацией production-сборки.
Использование CLI предполагает наличие знаний о Node.js и связанных с ней инструментов сборки. Новичкам во Vue или в инструментах сборки фронтенда настоятельно рекомендуем сначала прочитать руководство без применения каких-либо систем сборки прежде чем начинать использовать CLI.
Для Vue 3 требуется использовать Vue CLI v4.5, доступная в npm по имени @vue/cli . Для обновления необходимо переустановить последнюю версию @vue/cli глобально:
После установки в проекте Vue необходимо выполнить:
(opens new window) — инструмент для сборки веб-приложений, предлагающий исключительно быструю обработку кода, благодаря применяемому подходу по использованию нативных импортов ES-модулей.
Быстро развернуть проект на Vue используя Vite можно с помощью следующих команд.
или используя Yarn:
или с помощью pnpm:
(opens new window) можно обнаружить несколько различных сборок Vue.js. Рассмотрим подробнее какой файл из dist для каких случаев должен использоваться.
Глобальные сборки не являются UMD
(opens new window) и предназначаются только для использования напрямую через .
- Для использования в нативных импортах ES-модулей (в браузере через ).
- Предоставляет ту же компиляцию в runtime, содержит все внутренние зависимости и жёстко заданное поведение для production/разработки глобальной сборки.
- Для использования отрисовки на стороне сервера в Node.js через require() .
- При сборке приложения с помощью webpack с опцией target: 'node' и корректной экстернализацией vue — это та сборка, которая будет загружена.
- Есть предварительно собранные файлы для разработки/production, но соответствующий файл будет автоматически выбираться на основе значения process.env.NODE_ENV .
При необходимости компилировать шаблоны на клиенте (например, если передаёте строку в опцию template или монтируетесь к элементу DOM, используя его HTML в качестве шаблона) потребуется компилятор шаблонов, а с ним и подключение полной сборки:
При использовании vue-loader шаблоны внутри файлов *.vue будут предварительно компилироваться в JavaScript на этапе сборки. Поэтому в итоговой сборке компилятор шаблонов уже не будет нужен и можно использовать более лёгкую runtime-only сборку.
Vue не поддерживает IE8 и ниже, так как использует возможности ECMAScript 5, которые невозможно эмулировать в IE8. В остальном, поддерживаются все браузеры, совместимые с ECMAScript 5.
Семантическое версионирование
Vue следует семантическому версионированию во всех своих официальных проектах для документирования возможностей и поведения. Для недокументированного поведения или описания внутренней логики, изменения описываются в информации о релизах.
Информация о релизах
Версия последнего релиза: 2.6.14
Подробная информация об изменениях в каждой версии доступна на GitHub.
Инструменты разработчика и Vue
При использовании Vue мы рекомендуем установить Vue Devtools в браузере, для большего удобства выполнения проверок и отладки ваших приложений Vue.
Подключение черезНе используйте минифицированную версию во время разработки, иначе вы не будете получать предупреждения о типичных ошибках!
Версия для разработки С предупреждениями для удобства разработки и отладки
Версия для production Без предупреждений, 33.46КБ min+gzip
Для создания прототипов или в целях обучения можно использовать последнюю версию:
Для production, мы рекомендуем указывать конкретную версию и сборку, чтобы избежать неожиданных поломок при выходе новых версий:
Если используете нативные ES-модули, также существует и совместимая с ES-модулями сборка:
Vue также доступен на unpkg и cdnjs (cdnjs синхронизируется с npm с некоторой задержкой, из-за чего последняя версия может быть не всегда доступна сразу).
Обязательно прочитайте про отличия в сборках Vue и используйте версию для production на своём опубликованном сайте, заменив vue.js на vue.min.js . Это сборка оптимизирована для скорости, а не для удобства разработки.
Рекомендуем использовать npm при создании крупных приложений на Vue. Этот вариант прекрасно работает в паре с инструментами сборки, такими как Webpack и Browserify. Во Vue также есть совместимые с ними инструменты для использования однофайловых компонентов.
Инструменты командной строки (CLI)
Vue.js предоставляет официальный инструментарий для командной строки (CLI) для быстрого создания каркаса амбициозных одностраничных приложений. Предлагаемые шаблоны содержат всё необходимое для организации современной фронтенд-разработки. Всего за несколько минут вы получите работающую конфигурацию с горячей перезагрузкой модулей, линтингом кода при сохранении и настроенной конфигурацией production-сборки. Подробнее вы можете изучить в документации Vue CLI.
CLI — это инструмент для тех, кто знаком с Node.js и соответствующими инструментами сборки. Если вы новичок во Vue или инструментах сборки фронтенда, рекомендуем сначала прочитать руководство, не требующее использования инструментов сборки, а уже потом разбираться с CLI.
Объяснение различных сборок
В папке dist/ npm-пакета можно найти много разных сборок Vue.js. Вот краткий обзор отличий между ними:
Термины
Полная: сборка, которая содержит runtime и компилятор шаблонов.
Компилятор: код, который отвечает за компиляцию строковых шаблонов в render -функции JavaScript.
Runtime: код, который отвечает за создание экземпляров Vue, отрисовку и изменение виртуального DOM и т.д. По сути, это всё, кроме компилятора.
ES-модули: начиная с версии 2.6, Vue предоставляет две сборки ES-модулей (ESM):
ESM для браузеров (только 2.6.0+): предназначена для импорта в современных браузерах через .
Runtime + Компилятор vs. Runtime-only
Если нужно компилировать шаблоны на клиенте (например, передаёте строку в опцию template или монтируете к элементу DOM, используя его HTML в качестве шаблона), вам потребуется компилятор, а значит, полная сборка:
При использовании vue-loader или vueify шаблоны внутри *.vue файлов будут скомпилированы в JavaScript ещё на этапе сборки. Поэтому компилятор в итоговой сборке не потребуется и можно использовать сборки runtime-only.
Так как сборки runtime-only примерно на 30% легче, в сравнении с полными, вы должны использовать их всякий раз, когда это возможно. Если вы всё равно хотите использовать полную сборку, вам потребуется настроить псевдоним в сборщике:
Webpack
Rollup
Browserify
Добавьте в package.json вашего проекта:
Parcel
Добавьте в package.json вашего проекта:
Режим разработки vs. режим production
Режим разработки/production жёстко установлен в UMD-сборках: несжатые файлы для разработки и минифицированные файлы для production.
Сборки CommonJS и ES Module предназначены для инструментов сборки, поэтому мы не предоставляем минифицированных версий для них. Вы ответственны за минификацию итоговой сборки.
Сборки CommonJS и ES Module содержат проверки на process.env.NODE_ENV для определения режима, в котором они должны выполняться. Вы должны использовать соответствующие возможности систем сборки для переопределения этих переменных окружения, чтобы контролировать режим, в котором Vue будет запускаться. Замена process.env.NODE_ENV на строковый литерал позволяет минификаторам, таким как UglifyJS, удалять целые блоки кода, предназначенные только для разработки, уменьшая итоговый размер файла.
Webpack
С версии Webpack 4+ можно использовать опцию mode :
Но в Webpack 3 и более ранних версиях необходимо использовать DefinePlugin:
Rollup
Browserify
Примените глобальную трансформацию envify для вашей сборки.
CSP-окружения
Некоторые окружения, такие как Google Chrome Apps, требуют соблюдения Content Security Policy (CSP), запрещающей использование конструкции new Function() для исполнения выражений. Полная сборка использует подобные конструкции для компиляции шаблонов, и потому непригодна к использованию в таких окружениях.
С другой стороны, runtime-сборки полностью совместимы с CSP. Если использовать их с Webpack и vue-loader или Browserify и vueify, то шаблоны компилируются на этапе сборки в render -функции, которые отлично работают в CSP-окружениях.
Сборка dev-версии
Важное замечание: файлы сборки в /dist на GitHub обновляются только при релизах. Чтобы использовать версию из последних исходников с GitHub, соберите проект самостоятельно:
Bower
Только UMD-сборки доступны в Bower.
Загрузчики модулей AMD
Все UMD-сборки могут быть напрямую использованы как AMD-модули.
Depending on your use case and preference, you can use Vue with or without a build step.
A build setup allows us to use Vue Single-File Components (SFCs). The official Vue build setup is based on Vite, a frontend build tool that is modern, lightweight and extremely fast.
You can try Vue with SFCs online on StackBlitz. StackBlitz runs the Vite-based build setup directly in the browser, so it is almost identical to the local setup but doesn't require installing anything on your machine.
- Familiarity with the command line
- Install Node.js
To create a build-tool-enabled Vue project on your machine, run the following command in your command line (without the > sign):
This command will install and execute create-vue, the official Vue project scaffolding tool. You will be presented with prompts for a number of optional features such as TypeScript and testing support:
If you are unsure about an option, simply choose No by hitting enter for now. Once the project is created, follow the instructions to install dependencies and start the dev server:
You should now have your first Vue project running! Here are some additional tips:
- The recommended IDE setup is Visual Studio Code + Volar extension. WebStorm is also viable.
- More tooling details, including integration with backend frameworks, are discussed in the Tooling Guide.
- To learn more about the underlying build tool Vite, check out the Vite docs.
- If you chose to use TypeScript, check out the TypeScript Usage Guide.
When you are ready to ship your app to production, run the following:
This will create a production-ready build of your app in the project's ./dist directory. Check out the Production Deployment Guide to learn more about shipping your app to production.
To get started with Vue without a build step, simply copy the following code into an HTML file and open it in your browser:
The above example uses the global build of Vue where all APIs are exposed under the global Vue variable. For example, to also use the ref API, you can do:
While the global build works, we will be primarily using ES modules syntax throughout the rest of the documentation for consistency. In order to use Vue over native ES modules, use the following HTML instead:
Notice how we can import directly from 'vue' in our code - this is made possible by the block, leveraging a native browser feature called Import Maps.
You can add entries for other dependencies to the import map - just make sure they point to the ES modules version of the library you intend to use.
Import Maps Browser Support
Import maps are currently only available in Chromium-based browsers, so we recommend using Chrome or Edge during the learning process. If your preferred browser does not support import maps yet, you can polyfill it with es-module-shims.
Not for production
The import-maps-based setup is meant for learning only - if you intend to use Vue without build tools in production, make sure to check out the Production Deployment Guide.
As we dive deeper into the guide, we may need to split our code into separate JavaScript files so that they are easier to manage. For example:
You may have noticed that the imported component's template is inlined as a JavaScript string. If you are using VSCode, you can install the es6-string-html extension and prefix the strings with a /*html*/ comment to get syntax highlighting for them.
If you skipped the Introduction, we strongly recommend reading it before moving on to the rest of the documentation.
Continue the Guide
The guide walks you through every aspect of the framework in full details.
В этой статье мы с вами напишем свой собственный плагин для проектов на VueJS, который трансформирует проект в расширение для браузера. Узнаем как изменять правила сборки webpack и генерировать дополнительную структуру файлов и папок.
Расширения для браузеров часто имеют всплывающие окна, которые появляются при клике на иконку расширения. Во всплывающем окне может быть авторизация, регистрация или управление настройками расширения, а возможно и любая другая логика. Мне показалось очень удобным реализовать всплывающее окно и само расширение на VueJS. Было решено написать плагин для vue-cli который трансформирует существующий проект на VueJS в расширение для браузера. А содержимое проекта будет отображаться во всплывающем окне расширения. Этот плагин уже опробован в реальном проекте по проверке объявлений перекупщиков validauto.ru и расширениях для Google Chrome, Mozilla Firefox и Microsoft Edge "Узнай кто перекуп | (validauto.ru)"
Пишем плагин для vue-cli
Сначала мы создадим папку с именем vue-cli-plugin-simple-extension. Префикс vue-cli-plugin необходим для автоматического поиска плагина в npm пакетах при вызове команды vue add simple-extension.
В папке инициализируем package следующей командой
Структура плагина будет выглядеть так
Генератор создает новые файлы и директории или изменяет существующие по шаблону. Добавим следующую структуру в папку template внутри generator. При установке плагина генератор будет копировать эти файлы в папку проекта src.
content.js
Скрипт отвечает за взаимодействие с веб-страницами. Он может взаимодействовать с веб-страницами, которые посещает браузер. Может при необходимости изменять их или дополнять логикой расширения.
background.js
Скрипт отвечает за фоновый процесс. С его помощью можно взаимодействовать с сервером для передачи данных и с content.js.
manifest.json
Файл manifest.json сообщает браузеру важную информацию о расширении, его имени и необходимых разрешениях. "default_popup": "index.html" будет ссылаться на index.html проекта. Точка входа для Vue проектов, которая по-умолчанию находится в папке public.
Далее добавим следующий код в файл generator/index.js. Вызов api.render('./template') копирует наши файлы в проект. Код приведен ниже
Следующим шагом будет изменение конфигурации webpack. Это делается в основном файле плагина index.js с помощью следующего кода
Этот код добавляет два дополнительных entry для content.js и background.js. Копирует manifest.json и background.html в корень папки dist при сборке. Здесь используется copy-webpack-plugin. Его необходимо добавить в зависимости плагина следующей командой
И добавляем зависимость в основной проект при установке плагина. Это делается вызовом api.extendPackage в generator/index.js.
Проверка работы плагина локально
Удобно тестировать плагин локально без загрузки в npm или git репозитории. Для этого необходимо подключить package в основной проект перед вызовом vue add simple-extension. Примечание: данный шаг не будет требоваться когда ваш плагин будет общедоступным в репозитории npm.
В основном проекте выполняем
Теперь можем выполнить команду, которая добавляет плагин. В основном проекте выполним
Если все прошло успешно, то сборка расширения запускается стандартной командой
После публикации плагина в npm он будет доступен для любого пользователя через команду
Осталось папку dist загрузить в Google Chrome или Firefox. Поздравляю, расширение готово!
Заключение
Оказалось, что написать плагин для VueJS довольно просто. Плагин позволяет для разной конфигурации VueJS быстро трансформировать проект в расширение для браузера. Был продемонстрирован пример генерации дополнительной структуры проекта, изменения правил сборки webpack и подключения плагина локально.
Перед вами — вторая часть серии материалов, которая посвящена созданию веб-приложения Budget Manager с использованием Node.js, Vue.js и MongoDB. В первой части мы занимались сервером, а именно — подготовили основные методы RESTful API и наладили JWT-аутентификацию. Сегодня приступим к работе над клиентской частью приложения, создадим каркас фронтенда, средства для регистрации в системе и входа в неё, поговорим о маршрутах и об их защите.
Установка Vue.js и использование vue-cli
Установить Vue.js довольно просто. Мы планируем использовать vue-cli с шаблоном webpack . Обратившись к руководству по Vue, можно выяснить, что для установки vue-cli и подготовки рабочей среды используются такие команды:
Продолжим работу над проектом, создав папку application в его корневой директории. Этот шаг можно и пропустить, создав папку в процессе работы с vue-cli . Если вы решите не создавать папку, тогда вам нужно дать проекту имя, выполнив команду такого вида:
Вот как выглядит проект после создания папки application :
Теперь перейдём в только что созданную папку с помощью интерпретатора командной строки, и, если vue-cli ещё не установлен, выполним следующую команду:
Эта команда позволяет установить vue-cli глобально, поэтому неважно, в какой именно папке мы будем находиться, выполнив её.
Теперь вызовем следующую команду:
Обратите внимание на то, что тут не указано имя проекта, так как подразумевается, что команда выполняется в папке application , уже созданной для размещения в ней приложения.
После выполнения вышеприведённой команды и загрузки шаблона вам будет задан ряд вопросов:
Если хотите, на данном этапе может поменять название проекта, описание, сведения об авторе. Для того, чтобы не отклоняться от этого материала, оставьте всё остальное таким, как показано на рисунке.
Далее, всё ещё оставаясь в папке application , устанавливаем зависимости и запускаем проект.
Теперь можно полюбоваться на стандартную страницу Vue.
Очистка приложения Vue
Уберём из приложения некоторые ненужные нам стандартные элементы. Для этого надо перейти в папку application/src/assets и удалить logo.jpg , так как этим файлом мы пользоваться не будем. Далее, откроем файл корневого компонента App.vue из папки application/src и приведём его к виду, представленному следующим фрагментом кода:
Теперь надо очистить маршруты. Для этого откроем файл index.js в папке router и приведём его к такому виду:
Обратите внимание на то, что существует множество способов структурирования маршрутов, но, для того, чтобы не усложнять проект, мы просто импортируем компоненты и зададим маршруты в этом файле.
Теперь, на последнем этапе очистки стандартного приложения, удалим файл HelloWorld.vue из папки components .
Установка зависимостей
Прежде чем заняться разработкой фронтенда приложения, нужно установить ещё несколько зависимостей. Перед выполнением следующей команды проверьте, находитесь ли вы в папке application :
Теперь установим зависимости разработки:
Начало работы над фронтендом приложения
Теперь, когда все подготовительные мероприятия завершены, займёмся разработкой. Перейдём к папке components и создадим в ней папку pages , в которой создадим папку Authentication . В этой папке надо создать файл Authentication.vue , представляющий компонент, которым будем пользоваться для аутентификации. Вот что должно в итоге получиться:
В файле Authentication.vue разместим следующий код:
Расширением этого компонента займёмся позже, а пока перейдём в папку router и поработаем с маршрутами.
Для начала импортируем компонент Authentication и настроим маршрут для его использования:
Перейдём к компоненту App.vue из папки src и займёмся стилями. Сначала нужно подготовить тег style . Разместим его сразу после закрытия тега script :
Теперь переходим в папку src/assets и создаём в ней файл styles.scss и папку partials . В этой папке создадим два частичных шаблона, представленных файлами _variables.scss и _animations.scss . В результате должна получиться такая структура:
В файле _variables.scss зададим такие параметры:
В файл _animations.css добавим описания анимаций bounceIn и slideInFromLeft :
Импортируем частичные шаблоны в styles.scss :
Теперь, в папке assets , создадим папку images . Сюда можно поместить любое изображение, которое будет использоваться в качестве фона. Здесь, в репозитории, можно найти изображение, которое применяется в этом материале.
Настроим внешний вид приложения, приведя к следующему виду блок стилизации в файле App.vue :
Тут мы импортируем ранее подготовленные стили scss и задаём использование фиксированного фонового изображения для приложения. Мы стремимся к тому, чтобы на любом устройстве экран приложения выглядел примерно одинаково.
В псевдоэлементе body :after мы задаём параметр background-color , записывая в него значение переменной $background-tint . Это позволит применить к фоновому изображению пурпурный цветной фильтр. Вот как выглядят разные варианты фонового изображения.
Обратите внимание на то, что всё, что касается стилизации и работы с фоном, на функционал приложения не влияет, поэтому вы вполне можете пропустить эти шаги или украсить приложение так, как вам захочется.
Масштабирование области просмотра и загрузка иконок
Благодаря этому шагу мы обеспечим правильное отображение приложения на мобильных устройствах. Кроме того, на данном этапе работы мы загрузим иконки в стиле Material Design. Для того, чтобы всё это сделать, перейдём к файлу index.html , который расположен в папке application и добавим следующее в тег head :
Разработка компонента Authentication
Теперь, когда мы немного украсили приложение, избавившись, по крайней мере, от скучных белых страниц, продолжим работу над компонентом Authentication . Создадим в папке Authentication файл index.js .
Импортируем в него то, что нам понадобится и объявим константу, в которую запишем путь к API:
Теперь создадим объект Authentication , который будет содержать нужные нам методы:
Мы начинаем работу над этим компонентом, объявляя объект с именем user , который хранит сведения о том, аутентифицирован ли пользователь.
Теперь напишем методы:
В первом методе используются три аргумента:
Второй метод очень похож на первый, его мы используем для создания новой учётной записи. Разница между ним и первым методом заключается в конечной точке, с которой мы работаем.
Третий метод используется для проверки того, аутентифицирован пользователь или нет.
Последний метод позволяет возвратить заголовок Authorization .
Теперь продолжим работу над компонентом, открыв файл Authentication.vue . Тут мы будем пользоваться средствами Vuetify:
Здесь имеется элемент div с классом l-auth-container , который выполняет роль контейнера. Следом идёт ещё один div с классом l-auth , который содержит структуру элементов для организации формы ввода, в частности, это элемент v-form , привязанный к данным переменной validLogin .
Второе поле ввода предназначено для пароля, оно снабжено иконкой, которая указывает на то, может ли пользователь видеть вводимый пароль. У этой иконки есть коллбэк, являющийся стрелочной функцией, который позволяет переключать значение переменной loginPasswordVisible с true на false и наоборот. Если эта переменная установлена в true , то параметр type поля ввода устанавливается в text , иначе это password .
И, наконец, тут присутствуют описания кнопок, которые мы используем для создания новой учётной записи или для отправки формы с целью входа в систему.
Следующий фрагмент кода описывает структуру формы регистрации в системе, которая видна лишь в том случае, если переменная signUpVisible установлена в true . Устройство этой формы похоже на устройство формы входа в систему, тут изменены лишь несколько строк. В частности, здесь используется переменная signUpPasswordVisible вместо loginPasswordVisible и другой метод обработки щелчка по кнопке.
Теперь, в том же файле Authentication.vue , опишем скрипт компонента:
Тут всё начинается с импорта файла index.js из папки Authentication , так как нам нужен метод authenticate , определённый внутри этого файла.
Взглянем теперь на переменные, хранящие данные компонента:
И, наконец, вот код стилизации компонента, который надо разместить в том же файле Authentication.vue (тут вы можете дать волю фантазии и сделать всё таким, как вам хочется):
Вот как выглядят компоненты для входа в систему и регистрации нового пользователя.
Разработка компонента Home
Перейдём в папку pages и создадим файл компонента Home.vue :
Защита системы навигации
Откроем файл index.js из папки router . Вот к какому виду его нужно привести:
Рассмотрим этот код.
В этой строке мы импортируем файл Authentication , называя его Auth , так как компонент Authentication также был импортирован.
Тут мы даём имя объекту Router для того, чтобы позже создать защиту системы навигации. Также мы добавляем путь к компоненту Home . В параметре meta.requiredAuth будет записано true . Это означает, что если к этому компоненту попытается получить доступ неаутентифицированный пользователь, он будет перенаправлен на страницу входа в систему.
Здесь мы защищаем систему навигации. А именно, регистрируем глобальный сторожевой хук, пользуясь которым перед переходом по каждому маршруту проверяем, установлен ли его параметр meta.requiredAuth в true . Если это так, мы проверяем объект пользователя из Authentication . Если пользователь не аутентифицирован, мы перенаправляем его на страницу входа в систему.
Этой командой экспортируем маршрутизатор.
Теперь откройте файл main.js в папке application . Тут мы собираемся импортировать файл Authentication и вызвать метод checkAuthentication :
Без этого, если пользователь перезагрузит страницу или закроет её, а потом снова откроет, он будет перенаправлен на страницу входа в систему.
Итоги
Читайте также: