Скачать "Spring Security JWT: Implementing the client (frontend) using Json Web Tokens (JWT)"

Обложка аудиозаписи

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

Следующее видео: Java Full-Stack: Hotel Booking App With Spring Boot, Spring Security & Reactjs

Java Full-Stack: Hotel Booking App With Spring Boot, Spring Security & Reactjs

Java Full-Stack: Hotel Booking App With Spring Boot, Spring Security & Reactjs

Канал: Daily Code Work

dan vega

spring security jwt client

spring security

spring boot

jwt

json web token

spring boot security

spring security tutorial

java

spring security jwt

spring

security

authentication

spring framework

authorization

spring security oauth2

oauth2

spring security jwt example

spring boot jwt

jwt spring boot

00:00:02

сегодня мы поговорим о том,

00:00:03

как войти в приложение весенней загрузки

00:00:06

из клиента, поэтому у меня есть

00:00:09

этот пример здесь. Я оставлю ссылку на

00:00:12

руководство в описании ниже, мы

00:00:15

прошли настройку создать приложение весенней загрузки

00:00:17

с использованием Spring Security и узнать,

00:00:19

как аутентифицироваться с помощью JWT, используя

00:00:22

имя пользователя и пароль, опубликованные в

00:00:25

теле запроса,

00:00:26

поэтому мы рассмотрели этот пример, и

00:00:29

многие комментарии, которые я получил, были замечательными, но

00:00:30

как мне вызвать это из внешнего интерфейса

00:00:32

и я подумал, что это интересно, поэтому я

00:00:34

решил потратить некоторое время сегодня

00:00:36

и создать клиент, который взаимодействует с

00:00:39

этим сервисом, поэтому сегодня мы собираемся использовать множество

00:00:41

моих любимых инструментов, если вы не

00:00:43

знаете, что я огромный поклонник создания

00:00:44

веб-интерфейсных технологий, мы собираемся

00:00:47

использовать что-то под названием Veet, которое, если

00:00:49

вы не знаете, это действительно отличный

00:00:50

инструмент сборки, очень быстрый,

00:00:53

не зависящий от платформы, он поддерживает множество

00:00:54

различных платформ, таких как View и

00:00:55

Spelled и реагируйте на vanilla.js, поэтому все, что

00:00:58

вы хотите встроить, вы можете использовать Veet.

00:01:00

Я собираюсь использовать Vue, но, опять же, вы можете

00:01:02

подключить все, что захотите,

00:01:04

и это должно быть очень похоже,

00:01:07

так что вот мы и в этом приложении.

00:01:09

просто хочу, чтобы мы были в курсе того,

00:01:10

где мы находимся. Я немного обновил его,

00:01:13

поэтому добавил поддержку Springboot

00:01:15

3.0, когда я это сделал, нам пришлось вернуться

00:01:18

к конфигурации безопасности, которую он использовал для использования

00:01:21

авторизованных запросов, поэтому мы мы обновили

00:01:23

это для авторизации HTTP-запроса, и раньше он

00:01:26

использовал средство сопоставления amp, поэтому теперь мы

00:01:28

используем средство сопоставления запросов, и здесь мы

00:01:30

по сути говорим, что для токена нужно идти вперед

00:01:33

и разрешить всем, кто может вызывать

00:01:34

токен, потому что именно так вы получаете токен

00:01:36

обратно, немного все остальное должно быть

00:01:39

аутентифицировано, поэтому у нас здесь есть такие вещи, как

00:01:42

домашний контроллер, который имеет

00:01:45

пару сопоставлений, ну, только корневое сопоставление,

00:01:48

а затем у нас также есть сопоставление git для обеспечения

00:01:51

безопасности, так что это безопасно,

00:01:54

так что это пример, я продолжу и

00:01:56

оставлю ссылку на этот репозиторий GitHub

00:01:59

в описании ниже, вам придется

00:02:01

его отключить, запустите этот сервис, а

00:02:03

затем мы собираемся собрать клиент

00:02:05

отдельно, так что давайте продолжим

00:02:08

и перейдем к командной строки и

00:02:10

начните создавать наш клиент, все в порядке, поэтому я

00:02:12

упомянул veed, если вы хотите узнать

00:02:13

немного больше о veed, перейдите на

00:02:15

vjs.dev, там вы увидите начало работы,

00:02:17

вы можете запустить команду

00:02:19

npm create Veet самое позднее, что Я познакомлю

00:02:22

вас с инструментом создания строительных лесов, который дает

00:02:25

вам некоторые возможности, поэтому, если вы хотите работать

00:02:27

с чем-то другим, кроме просмотра, если вы

00:02:29

хотите использовать, например vanilla.js, или реагировать, используйте

00:02:32

этот инструмент, если вы действительно хотите использовать представление,

00:02:33

хотя, если вы посмотрите на На

00:02:36

веб-сайте viewjs.org при быстром запуске он

00:02:38

дает вам команду npm init View

00:02:42

самое позднее, так что под капотом используется Veet,

00:02:44

но здесь используется Create view,

00:02:46

причина, по которой мы хотим это сделать, заключается в том, что он

00:02:48

дает нам множество вариантов для разных вещей.

00:02:50

например, пина для управления состоянием, которую мы

00:02:53

собираемся использовать, мы собираемся использовать

00:02:55

машинописный текст, а также мы собираемся использовать

00:02:58

маршрутизацию, вот что я собираюсь сделать,

00:03:00

поэтому я перейду к командной

00:03:02

строке. я собираюсь сказать npm init View

00:03:06

самое позднее, он перебросит нас сюда и

00:03:08

скажет, как называется проект. Я собираюсь

00:03:10

назвать эту демонстрационную версию аутентификации, хотим ли мы добавить

00:03:13

машинописный текст, да, я хочу, я, э-э, jsx, нет просмотра

00:03:17

маршрутизатора, да Пина, да, я собираюсь сказать «нет»

00:03:21

тестированию, просто чтобы это было

00:03:23

немного проще, нет, eslint, и у нас

00:03:27

создан наш проект, так что я собираюсь продолжить

00:03:30

и перейти к демо-версии для аутентификации и внутри

00:03:33

демо-версии, я собираюсь чтобы запустить установку npm,

00:03:40

и теперь я могу продолжить и запустить npm run

00:03:43

Dev

00:03:45

и запуск нашего сервера, который вы можете

00:03:47

очень быстро увидеть на порту 5173, так что давайте

00:03:51

перейдем к браузеру, и все готово,

00:03:52

вы получите эту действительно хорошую целевую страницу,

00:03:54

вы сделали это, вы успешно создал

00:03:57

проект с Veet и просмотрите три, что будет

00:04:00

дальше. Действительно хороший шаблон по умолчанию

00:04:02

дает вам ссылки на такие вещи, как

00:04:04

документация, инструменты

00:04:06

сообщества экосистемы и поддержка представления, так здорово,

00:04:09

что теперь я хочу пойти

00:04:12

дальше и открыть это в Visual Studio.

00:04:14

код, поэтому из командной строки я наберу

00:04:17

код и только этот каталог, который

00:04:20

поместит нас в код Visual Studio, хорошо,

00:04:23

поэтому первое, что мне нужно сделать, это

00:04:24

кое-что почистить. Я не собираюсь использовать

00:04:27

здесь эти компоненты, поэтому что я

00:04:29

собираюсь сделать, так это просто войти

00:04:31

и удалить их, чтобы мне не нужно это мне не

00:04:34

нужно мне это не нужно и мне

00:04:36

это не нужно, так что теперь с компонентами все

00:04:39

совершенно ясно, мы импортируем кое-что

00:04:41

из этого сюда, так что я собираюсь избавиться

00:04:43

от этого компонента hello world,

00:04:45

хм, и на самом деле кое-что из этого примерно то

00:04:47

же самое, но давайте просто избавимся от этого, я

00:04:49

хочу начать все сначала,

00:04:52

так что давайте избавимся от всего вот и

00:04:55

все, что мы сейчас делаем, также в нашем основном

00:04:58

машинописном тексте, здесь мы да, подтягиваем

00:05:01

некоторые ресурсы, подразумевающие CSS, поэтому я собираюсь пойти

00:05:04

дальше и избавиться от этого,

00:05:07

мне на самом деле не нужен базовый CSS или логотип,

00:05:11

поэтому я собираюсь чтобы избавиться от них,

00:05:13

и я думаю, это все, что нам нужно сделать, поэтому

00:05:18

давайте избавимся от этой строки здесь, и да,

00:05:21

так что это выглядит хорошо для того, чтобы

00:05:23

снова очистить это, мы используем Pina, если

00:05:26

вы не знакомы с Pina, это э-э

00:05:28

новый рекомендуемый инструмент для

00:05:29

управления состоянием, на самом деле он очень прост в

00:05:32

использовании, мы включили его, мы импортировали его

00:05:34

сюда, и мы просто говорим, что app.use

00:05:36

создает Pina, и мы также используем

00:05:39

маршрутизатор просмотра, поэтому Pina - это эти магазины в

00:05:43

вот поэтому всякий раз, когда мы создаем хранилище,

00:05:46

для нас создается хранилище по умолчанию,

00:05:48

на которое вы можете взглянуть, мы на самом деле

00:05:50

тоже избавимся от него,

00:05:52

а затем есть маршрутизатор, есть

00:05:55

индекс для маршрутизатора, мы можем использовать это как своего рода

00:05:58

наш база,

00:05:59

так что выглядит хорошо,

00:06:01

гм, пока все выглядит довольно хорошо,

00:06:03

теперь, когда мы очистили наше приложение, мы можем

00:06:06

начать настраивать это, и все в порядке.

00:06:08

Я собираюсь добавить CSS Tailwind в свой

00:06:11

проект. Я большой поклонник Tailwind, если вы

00:06:13

не хотите использовать Tailwind, это нормально,

00:06:14

вы можете стилизовать в основном только

00:06:17

страницы и форму входа, вот для

00:06:20

чего я его использую, поэтому я

00:06:23

собираюсь сказать npm create

00:06:26

um oops, извините npm устанавливаем Dash D, поэтому

00:06:31

Tailwind CSS мы устанавливаем э-э-э, пост

00:06:35

CSS и автоматический префикс, так что я просто

00:06:39

беру это из документации,

00:06:40

мы устанавливаем эти три библиотеки

00:06:43

в качестве зависимостей Dev,

00:06:45

затем мы собираемся объединить npx Tailwind CSS,

00:06:50

так что это будет чтобы создать нам файл

00:06:53

Tailwind config.js и пост CSS

00:06:56

config.js,

00:06:58

затем мы хотим открыть нашу

00:07:02

конфигурацию Tailwind, чтобы у нас был

00:07:05

контент, который мы хотим продолжить и

00:07:06

заменить. Я извлек это из

00:07:08

документации,

00:07:09

это может быть просто

00:07:13

так, и этого хватит,

00:07:16

и наконец, что нам нужно сделать, это

00:07:18

открыть нашу и нам

00:07:21

нужно создать новую таблицу стилей,

00:07:24

поэтому позвольте мне просто сказать здесь ресурсы CSS,

00:07:27

упс, давайте продолжим и переименуем это в

00:07:32

CSS, а затем внутри CSS я

00:07:35

создам новый файл с именем Tailwind.css,

00:07:42

туда я просто вставляю

00:07:44

базовые компоненты и утилиты Tailwind, мы

00:07:47

собираемся сохранить их, а затем мне нужно

00:07:50

включить их так же, как мы это сделали.

00:07:52

прежде чем отлично, давайте продолжим и запустим,

00:07:55

на самом деле, давайте просто проведем здесь быстрый тест,

00:07:57

давайте откроем приложение, и внутри этого

00:08:01

шаблона я создам

00:08:04

div, и внутри этого div я просто

00:08:07

скажу «

00:08:08

Привет,

00:08:10

мир», и внутри

00:08:13

этого я скажем, класс равен минимальному

00:08:18

экрану H и BG, скажем просто серый 100.

00:08:23

поэтому я собираюсь сохранить, что я собираюсь

00:08:24

запустить npm run Dev,

00:08:33

и у нас есть ошибка, хм,

00:08:35

добро пожаловать, так что это внутри домашнего

00:08:39

представления да у нас есть некоторые представления,

00:08:41

поэтому я собираюсь избавиться от них,

00:08:46

и теперь все должно быть в порядке,

00:08:51

теперь все должно быть в порядке, давайте запустим npm run

00:08:53

Dev,

00:08:54

все в порядке, и я забыл, что мне нужно

00:08:56

очистить свои маршруты, потому что у меня нет этих

00:08:58

представлений больше, так что давайте просто начнем

00:09:00

здесь и npm запустим Dev,

00:09:03

и похоже, что мы сейчас работаем,

00:09:04

давайте перейдем к браузеру, и это

00:09:06

может быть неочевидно, так что давайте просто

00:09:09

продолжим и очистим что-нибудь еще, я

00:09:12

собираюсь пойти в app.view, и я скажу,

00:09:16

что контейнер MX Auto, мы просто добавим ему

00:09:20

немного дополнений, и все готово, и

00:09:22

теперь у нас есть наш контейнер, который находится

00:09:25

посередине с hello world, и с другой

00:09:27

стороны, вы всегда можете добавьте к этому немного отступов,

00:09:29

но это выглядит немного

00:09:31

яснее: Tailwind действительно установлен

00:09:34

и работает нормально, поэтому первое, что

00:09:36

мне, возможно, придется здесь решить, это основное

00:09:39

приложение. Просмотр. Мне нужно настроить его,

00:09:41

чтобы мы может иметь несколько ссылок для перехода на

00:09:44

панель мониторинга и, возможно, выхода из системы, а затем на

00:09:47

самом деле придется использовать

00:09:49

представление маршрутизатора, а затем нам придется

00:09:50

создать пару представлений: одно для

00:09:52

представления панели управления и одно для представления входа в систему,

00:09:54

как только мы настроив эту настройку, мы теперь можем

00:09:57

зайти в наш маршрутизатор и сказать, по сути, эй,

00:09:59

все, но представление входа в систему должно

00:10:01

быть заблокировано,

00:10:02

так как нам это сделать, гм,

00:10:04

сначала мне это не нужно, давайте пока избавимся

00:10:07

от этого

00:10:09

здесь, я' Я собираюсь создать

00:10:12

заголовок,

00:10:13

и внутри этого заголовка я собираюсь

00:10:16

присвоить ему класс заполнения восемь,

00:10:20

и мы собираемся создать здесь новую навигацию,

00:10:22

так что, скажем, навигация, и внутри навигации я

00:10:26

собираюсь у нас есть пара ссылок на маршрутизаторы,

00:10:28

так что одна из них будет связана с корнем, так что это

00:10:32

будет наш дом,

00:10:33

поэтому мы скажем, давайте на самом деле вызовем эту

00:10:36

панель управления,

00:10:38

а затем,

00:10:40

что мы хотим сделать внутри здесь,

00:10:46

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

00:10:50

самом деле я собираюсь создать просто

00:10:54

ссылку на маршрутизатор, а не ссылку на маршрутизатор, я просто собираюсь

00:10:55

сделать

00:10:56

здесь, и,

00:10:58

скажем, класс

00:11:02

ml4, просто чтобы дать ему небольшой запас,

00:11:06

ну, мы также сделаем, может быть, немного текста индиго,

00:11:11

давайте сделаем 400,

00:11:14

и мы дайте этому обработчик щелчка,

00:11:16

который перейдет к выходу из системы, к которому мы вернемся,

00:11:20

и мы скажем выйти из системы,

00:11:23

и

00:11:25

это нормально, и на самом деле, поскольку мы

00:11:27

еще не определили это, давайте просто

00:11:29

выйдем из этого сейчас,

00:11:30

хорошо, так что у меня в основном есть ссылку, которая

00:11:33

ведет на панель управления, и тогда я,

00:11:35

очевидно, могу создать другие ссылки, если захочу

00:11:39

за границу,

00:11:41

чтобы я мог прийти сюда и сказать что-то вроде о

00:11:47

продуктах,

00:11:53

и это были бы наши ссылки на эти

00:11:56

элементы навигации, так что тогда мне нужен

00:12:01

способ

00:12:04

отображать любое представление, в котором мы находимся, за

00:12:07

пределами заголовка. Я собираюсь

00:12:08

создать

00:12:10

здесь новый основной элемент main, и давайте присвоим ему

00:12:13

класс

00:12:15

заполнения восемь и ширину, мы просто скажем, скажем, скажем,

00:12:19

половину его

00:12:22

и это это то место, где будет отображаться представление маршрутизатора, чтобы оно

00:12:25

отображало

00:12:26

все, что является текущим представлением, хорошо,

00:12:29

поэтому в разделе «Представления» я собираюсь создать новое

00:12:31

представление, которое мы назовем этой информационной панелью

00:12:35

view.view, и скажем так, это

00:12:39

представление, поэтому настройка сценария,

00:12:41

это на самом деле,

00:12:44

гм, на

00:12:51

самом деле оно будет равно

00:12:54

TS,

00:12:55

и тогда мне не нужен стиль здесь, в

00:12:58

шаблоне, у нас

00:13:00

просто будет H1, а

00:13:03

здесь у нас будет класс

00:13:07

Let's скажем, текст равен 3L, и мы

00:13:11

добавим ему отступ в нижней части восьми,

00:13:14

мы назовем его информационной панелью в качестве заголовка,

00:13:17

а затем внутри здесь мы просто скажем, что

00:13:21

это панель мониторинга,

00:13:25

хорошо, так что с этим на месте я собираюсь

00:13:27

вернитесь к моему маршрутизатору, и я собираюсь

00:13:30

определить для него маршрут, так что это займет

00:13:33

путь, который мы назовем корнем, это будет

00:13:36

имя, которое мы назовем этим

00:13:39

домом, или мы можем назвать эту панель управления, что

00:13:42

звучит хорошо и тогда компонент

00:13:45

будет тем, кто мы и что мы

00:13:47

собираемся использовать в качестве компонента, поэтому я

00:13:49

скажу «Просмотр информационной панели»,

00:13:51

и это импортирует это, но давайте назовем

00:13:54

это просто «Просмотр информационной панели»,

00:13:57

и это выглядит хорошо, так что теперь

00:14:00

я не думаю Я работаю здесь, так что давайте

00:14:02

продолжим, а премьер-министр запустит Dev,

00:14:06

и теперь у нас есть кое-что, что происходит,

00:14:09

так что давайте вернемся к приложению,

00:14:11

мне они действительно не нужны, они были

00:14:14

там просто для теста, и поэтому теперь

00:14:16

я у меня есть панель управления,

00:14:20

которая не похожа на три,

00:14:23

теперь давайте вернемся к

00:14:25

тексту

00:14:28

3XL, это лучше,

00:14:32

хорошо, вот наша домашняя страница, это

00:14:35

наша навигация здесь, у нас просто есть

00:14:37

панель управления, и у нас есть выход из системы, так что теперь

00:14:40

нам нужен еще один, эээ нам нужно

00:14:44

создать представление входа в систему, поэтому я собираюсь

00:14:47

продолжить и скопировать это,

00:14:50

потому что оно будет очень похоже,

00:14:52

поэтому новый вид входа в файл нажмите Просмотр,

00:14:57

мы собираемся сказать «

00:15:00

Войти

00:15:01

сейчас», разница в том, что это будет

00:15:03

тянуть в компоненте, поэтому мы хотим

00:15:07

создать новый компонент,

00:15:10

который называется нашей формой входа,

00:15:13

скажем, форма входа в систему Dot View, и теперь это

00:15:15

компонент, если мы хотим использовать его

00:15:17

в другом месте, мы могли бы хорошо, давайте начнем

00:15:19

со сценария. Lang равно машинописному сценарию, это

00:15:23

будет настроен

00:15:25

здесь. Я собираюсь

00:15:26

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

00:15:28

смотреть, как я правильно напечатаю это, по сути,

00:15:30

это просто форма, поэтому в форме при отправке

00:15:33

мы собираемся вызвать метод называется

00:15:36

submit, давайте просто продолжим и скажем об

00:15:38

отправке, и мы будем консультировать.

00:15:43

Формы журнала отправлены

00:15:46

отлично, и мы предотвращаем использование по умолчанию, тогда у

00:15:50

нас есть имя пользователя, и это

00:15:53

имя пользователя использует модель v для имени пользователя с точкой,

00:15:58

поэтому нам нужно будет настроить

00:16:01

здесь реактивное свойство, так что допустим, что

00:16:03

константный пользователь равен реактивному имени

00:16:08

пользователя и паролю да, это выглядит хорошо,

00:16:11

нам нужно импортировать это

00:16:15

добавление, импорт из представления нет, это неправильно,

00:16:21

мы просто хотим

00:16:23

импортировать реактивный

00:16:28

из представления,

00:16:30

круто,

00:16:31

теперь у нас есть имя пользователя, у нас есть

00:16:34

пароль и опять же, у нас здесь просто есть

00:16:37

Tailwind, стилизующий нашу форму, так что

00:16:40

теперь, если мы вернемся к нашему login.view, теперь

00:16:43

мы сможем продолжить и

00:16:45

включить это, так что, скажем, форма входа,

00:16:48

и

00:16:52

я не уверен, что не знаю почему это не

00:16:55

автоматический импорт, давайте просто продолжим

00:16:57

и импортируем форму входа

00:17:00

из

00:17:03

формы входа в компоненты. Dot View, хорошо, пока все

00:17:07

хорошо, теперь мы не можем добраться до

00:17:10

формы входа, потому что у нас

00:17:11

еще нет маршрута для этого,

00:17:13

поэтому мы' мы собираемся открыть эту резервную копию,

00:17:14

мы в основном копируем это, так что это

00:17:18

будет косая черта входа в систему,

00:17:20

мы скажем «вход», а затем это будет

00:17:23

вид входа в систему,

00:17:26

и

00:17:32

здесь будет то же самое.

00:17:40

круто, похоже, у нас здесь есть одна маленькая

00:17:43

ошибка, давайте исправим это,

00:17:45

и теперь нам нужно

00:17:48

заставить его перейти к представлению входа в систему, если

00:17:50

мы не вошли в систему,

00:17:52

так как мы можем это сделать и что мы можем сделать,

00:17:55

мы можем сказать перед каждым на маршрутизаторе, что мы собираемся

00:17:58

что-то сделать. Я собираюсь

00:18:01

сделать это синхронизацией, и мы просто скажем

00:18:03

два,

00:18:05

и внутри здесь мы собираемся сказать,

00:18:08

какие наши общедоступные страницы, поэтому наши общедоступные

00:18:10

страницы

00:18:11

может быть что-то вроде «прямо сейчас

00:18:15

войдите в систему», чтобы любой мог войти в систему,

00:18:19

поэтому мы должны сказать, что, по сути, если это

00:18:22

не так, если вы не вошли в систему,

00:18:24

то мне нужно, чтобы вы прошли аутентификацию,

00:18:27

поэтому мы собираемся сказать, что

00:18:30

требуется аутентификация если это не общедоступные страницы,

00:18:33

если да, если мы не находимся в массиве общедоступных страниц

00:18:38

здесь, тогда требуется аутентификация,

00:18:44

поэтому, если аутентификация требуется

00:18:48

сейчас, нам

00:18:51

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

00:18:53

нам придется сказать

00:18:56

если требуется аутентификация и пользователь не

00:19:01

вошел в систему, сделайте это, но у меня

00:19:06

пока нет механизма аутентификации, поэтому я просто

00:19:08

хочу заставить нас перейти к входу в систему,

00:19:11

поэтому все, что я собираюсь сделать, это сказать возврат

00:19:15

косой черты для входа в систему,

00:19:18

хорошо, так

00:19:20

что

00:19:23

теперь это выглядит лучше, наша

00:19:25

форма входа выглядит лучше, если у меня есть полная страница,

00:19:28

но сейчас у меня нет полной страницы,

00:19:30

поэтому давайте исправим это,

00:19:33

чтобы наше представление входа в систему отображало нашу форму входа,

00:19:38

наша форма входа находится

00:19:42

здесь и раньше,

00:19:46

как мы это сделали мы сказали в части приложения,

00:19:50

что

00:19:52

да, так что давайте пока просто установим это значение на полную мощность,

00:19:56

и все готово, и теперь мы

00:19:59

отображаем нашу форму входа, независимо от того, что,

00:20:01

если я попытаюсь вернуться на панель управления, меня

00:20:04

автоматически отправят на страницу входа, которую я

00:20:07

собираюсь обновить, и меня отправляют на

00:20:09

страницу входа,

00:20:10

так что теперь, если я продолжу и открою

00:20:12

консоль, мы увидим, что ничего не происходит,

00:20:15

я попробую войти в систему, и мы просто

00:20:17

увидим, что форма была отправлена в

00:20:20

порядке, так что теперь нам нужно

00:20:21

начать работать над этой частью, и именно

00:20:24

здесь я собираюсь продолжить и закрыть

00:20:25

все это, здесь вступает в игру Пина,

00:20:28

поэтому нам нужна система управления состоянием,

00:20:30

чтобы в основном скажем, вы вошли в систему, если

00:20:32

нет, вот

00:20:33

некоторые действия, чтобы иметь возможность

00:20:36

правильно войти в систему и выйти из системы, чтобы сделать это, нам

00:20:39

нужно сохранить некоторое состояние, так что это не будет

00:20:41

любезно, вы знаете

00:20:43

введение в Pina, если вы ' Я

00:20:44

заинтересован в том, чтобы я мог что-то сделать,

00:20:46

или есть много ресурсов, которые помогут

00:20:48

начать работу с Pina,

00:20:50

но я собираюсь создать новый магазин, я

00:20:52

назову его auth.ts и внутри этого

00:20:56

места я собираюсь экспортируйте константу, а затем

00:20:59

соглашение здесь — использование, а затем

00:21:02

имя хранилища, так что наше будет хранилищем

00:21:04

аутентификации, и мы собираемся определить так

00:21:07

хранилище, и это будет

00:21:10

его начало, так что теперь у нас есть идентификатор auth у нас

00:21:13

будет какое-то состояние, так что это

00:21:16

хорошее начало

00:21:17

внутри State. Я собираюсь вернуть

00:21:22

объект, у этого объекта будет

00:21:25

пользователь, давайте просто скажем «нет» сейчас, у меня

00:21:28

будет токен, давайте скажем «нет»

00:21:31

сейчас и я собираюсь получить

00:21:35

обратный URL-адрес, и мы просто скажем, что

00:21:40

это корень,

00:21:42

так что это, э-э, начало нашего состояния,

00:21:45

поэтому я возвращаюсь,

00:21:50

почему это там,

00:21:53

в воздухе, Дэн,

00:21:58

хм, хорошо, так что я возвращаю это,

00:22:08

хорошо, так что теперь мне нужны некоторые действия,

00:22:12

поэтому я собираюсь выполнить действия, и тогда я смогу их сделать. Я

00:22:16

не знаю, почему я все еще получаю этого

00:22:18

пользователя воздуха, ноль

00:22:21

принял нет,

00:22:24

о, это состояние,

00:22:30

о, я не знаю, почему я

00:22:35

весело провели время, хорошо, тогда у нас будет несколько

00:22:39

действий, и внутри действий это

00:22:41

будут наши методы, поэтому у нас

00:22:44

будет один, называемый вход в систему. Я собираюсь

00:22:46

сделать это асинхронным, и для этого

00:22:48

потребуется имя пользователя. это строка, для этого

00:22:51

также понадобится пароль, который

00:22:53

является строкой,

00:22:55

так что теперь мы хотим сделать это, о да,

00:22:58

это довольно близко, но на самом деле мы

00:23:00

просто собираемся использовать выборку, поэтому я

00:23:02

хочу сделать следующее: получить ответ. Я

00:23:04

собираюсь дождаться

00:23:06

вызова выборки, поэтому наш вызов выборки

00:23:09

перейдет на http local,

00:23:14

поэтому localhost

00:23:16

8080, так что это наше приложение весенней загрузки.

00:23:18

Помните, что URL-адрес для этого был просто

00:23:21

подождите, на самом деле я думаю, что это был просто токен,

00:23:25

поэтому мы Я просто скажу просто токен,

00:23:28

а потом еще кое-что, мы должны

00:23:30

сказать, что это сообщение,

00:23:33

мы собираемся установить несколько заголовков, поэтому я

00:23:37

хочу сказать, что я отправляю

00:23:39

тип контента application.json,

00:23:42

а затем мне нужно отправить тело как часть

00:23:44

запроса на публикацию, и вы можете видеть, что

00:23:47

мы получаем здесь некоторую помощь, поэтому

00:23:48

преобразуйте в строку, и мы хотим преобразовать в строку

00:23:51

имя пользователя и пароль,

00:23:57

вот и все,

00:24:01

и

00:24:03

это то, что мы получаем здесь в качестве аргументов,

00:24:06

так что

00:24:08

это должно быть наш звонок,

00:24:10

давайте просто попробуем это и посмотрим,

00:24:14

что мы получим в ответ правильно, поэтому

00:24:17

я хочу, по сути, просто выйти из системы из

00:24:19

нескольких вещей, которые я хочу сказать,

00:24:22

статуса ответа

00:24:25

и об

00:24:28

ответе. Текст с точкой да,

00:24:33

давайте получим текст, потому что что

00:24:37

возвращается из приложения весенней загрузки,

00:24:38

это токен, который является нашим

00:24:41

токеном jot, поэтому мы сможем увидеть это,

00:24:44

если мы войдем в систему правильно, поэтому я собираюсь

00:24:45

войти в систему неправильно и получить статус,

00:24:48

вы знаете, надеюсь, 401, но тогда, если мы

00:24:50

войдите в систему правильно, это должно быть 200, это

00:24:53

должна быть наша работа,

00:24:54

давайте просто запустим, давайте просто вернемся к

00:24:57

нашему приложению весенней загрузки и

00:24:59

убедитесь, что оно запущено и работает нормально, и это

00:25:03

так, скажем, вы знаете что-то, что

00:25:06

не работает,

00:25:07

и ох, так на самом деле нам нужно это вызвать,

00:25:10

я забыл об этом,

00:25:11

поэтому давайте вернемся к нашей форме входа в систему

00:25:15

при отправке, мы просто говорим, что

00:25:19

форма была отправлена, поэтому нам нужно сделать кое-что

00:25:22

еще, нам нужно

00:25:27

сказать, давайте просто проведем быструю проверку

00:25:31

скажем, если имя пользователя с точкой пользователя

00:25:35

не равно пустому и user.password

00:25:41

не пусто,

00:25:45

давайте продолжим и войдем в систему, давайте попробуем

00:25:48

войти в систему, и теперь, как мы собираемся войти в систему,

00:25:50

чтобы мы хотели использовать наше хранилище аутентификации, потому что

00:25:52

оно имеет действие для входа в систему, поэтому я

00:25:55

собираюсь сказать: используйте хранилище аутентификации, которое, как вы видите,

00:25:58

извлекается для меня из аутентификации магазинов,

00:26:01

поэтому я собираюсь использовать автор.логин,

00:26:05

а затем мы собираемся передать

00:26:07

user.username и пользователя. .password

00:26:10

и просто если мы хотим просто быть уверенными, что

00:26:13

можем продолжить и выйти из системы здесь,

00:26:19

чтобы все

00:26:22

выглядело нормально. Определить хранилище не

00:26:26

определено. Хорошо, мы просто забыли

00:26:29

что-то сюда вставить,

00:26:31

ладно,

00:26:43

давайте попробуем это еще раз,

00:26:46

так что есть наше имя пользователя и наш пароль,

00:26:48

доступ для получения на локальном хосте. Токен 8080

00:26:53

из источника 5173 был заблокирован, так

00:26:57

хорошо, что у нас есть проблема с курсом, мы можем

00:26:59

это исправить, так что я сделал

00:27:01

об этом отдельное видео, я не собираюсь тратить слишком много

00:27:02

много времени на это, но мы можем пойти дальше и

00:27:05

пройти курс здесь, так что со значениями по умолчанию, а затем

00:27:09

все, что нам нужно сделать, это определить новый компонент,

00:27:13

поэтому мы назовем компонент, и тогда это

00:27:15

будет источник конфигурации ядра. Источник

00:27:21

конфигурации Coors, который выглядит хорошо,

00:27:25

а затем нам просто нужно определить несколько

00:27:27

вещей, поэтому конфигурация ядер, которую

00:27:30

мы назовем этой конфигурацией, равна

00:27:33

новой конфигурации ядер,

00:27:36

верно, это выглядит хорошо, поэтому теперь из

00:27:39

конфигурации мы можем установить пару

00:27:41

вещей, так что задайте вслух

00:27:43

Origins, давайте начнем с этого это список,

00:27:47

поэтому вы можете сказать list.of,

00:27:49

и это было задумано прямо сейчас, это будет

00:27:51

просто один, поэтому localhost

00:27:55

51.73

00:27:58

это будет get, поэтому мы

00:28:03

отправляем git или сообщение,

00:28:07

а затем

00:28:09

Configuration.set разрешенные заголовки, и

00:28:12

какие заголовки мы отправляем еще раз

00:28:14

список, и

00:28:18

на данный момент это будет авторизация и тип контента,

00:28:22

так вот как выглядят наши запросы:

00:28:24

они доставляют наши сообщения в эту конкретную

00:28:25

конечную точку. Это заголовки, которые могут

00:28:28

быть включены,

00:28:30

поэтому нам нужна конфигурация курса на основе URL-адреса.

00:28:33

исходный код

00:28:35

равен новому, да,

00:28:39

и затем мы можем установить конфигурацию курса регистрации, которую

00:28:42

мы хотим сделать, чтобы эта

00:28:45

конкретная конфигурация была для всего, что

00:28:47

мы скажем конфигурация, а затем, наконец,

00:28:50

мы можем вернуть

00:28:52

исходный код, чтобы это выглядело довольно хорошо,

00:28:55

давайте продолжим и перезапустим наше

00:28:57

приложение

00:28:58

вернитесь к нашему внешнему

00:29:01

приложению и посмотрите, изменилось ли что-нибудь,

00:29:07

и теперь мы получаем 401, поэтому

00:29:10

мы пытаемся опубликовать это имя пользователя и

00:29:12

пароль, мы получаем ответ 401, и

00:29:14

это нехорошо, вот что я хочу для публикации

00:29:17

— это D Vega и пароль,

00:29:20

и если мы это сделаем, мы получим 200 и

00:29:23

обещание, и вы увидите, что обещание

00:29:26

было выполнено, и токен находится там,

00:29:29

поэтому мы добились некоторого

00:29:32

прогресса, это приятно видеть, так что теперь то, что

00:29:35

я хочу сделать, это просто удалить эти журналы,

00:29:37

и я хочу сказать, что если

00:29:39

статус точки ответа равен 200,

00:29:44

поэтому, если мы получили хороший ответ, давайте получим

00:29:46

токен, и это снова мы увидели, что

00:29:49

здесь это обещание, которое мы нужно

00:29:52

дождаться

00:29:53

ответа с точечным текстом, так что теперь мы

00:29:56

получили токен,

00:29:58

мы можем сказать, что этот пользователь с точкой равен

00:30:01

имени пользователя, которое мы получили,

00:30:04

мы можем сказать, что этот токен

00:30:09

равен токену,

00:30:13

а

00:30:15

затем я хочу пойти,

00:30:17

так что на самом деле позвольте я смотрю на

00:30:20

этого пользователя,

00:30:23

почему он жалуется,

00:30:27

и

00:30:29

он говорит: «

00:30:32

Нет-

00:30:37

нет»,

00:30:38

как только мы установили пользователя и токен,

00:30:41

теперь мы можем использовать маршрутизатор,

00:30:45

а не ключ маршрутизатора, я хочу сказать

00:30:47

router.push this URL-адрес возврата через точку,

00:30:51

и если по какой-то причине он пуст,

00:30:54

я просто пойду сюда, я думаю,

00:30:57

да,

00:30:58

так что мне нужно внести это, я думаю,

00:31:03

маршрутизатор, почему эта точка в ключе маршрутизатора нам

00:31:08

не нужна, это

00:31:10

круто, так что это наш логин, давайте посмотрим,

00:31:14

сработает ли это, поэтому теперь, как только мы сохраним этого

00:31:18

точечного пользователя и этот точечный токен,

00:31:21

пользователь будет установлен здесь, поэтому теперь из

00:31:26

нашего магазина или с нашего маршрутизатора мы можем добавить

00:31:29

еще одну быструю проверку прямо сейчас, и теперь

00:31:32

мы хотим сделать следующее: хочу сказать, что

00:31:35

константная

00:31:37

аутентификация равна использованию хранилища аутентификации,

00:31:42

и теперь, когда у нас есть аутентификация, мы могли бы сказать

00:31:44

и auth, а не auth.user,

00:31:49

поэтому, если auth.user там нет, тогда

00:31:54

продолжайте и вернитесь к входу в систему,

00:31:56

поэтому я собираюсь обновить эта страница снова,

00:31:58

и я продолжаю входить в систему, даже если захожу

00:32:02

сюда,

00:32:03

поэтому теперь я хочу попытаться войти в систему

00:32:05

с помощью d Vega и войти в систему с паролем,

00:32:10

и мы не получаем никаких

00:32:15

ошибок,

00:32:17

давайте перейдем на локальный хост хм,

00:32:21

давайте посмотрим,

00:32:23

давайте продолжим и

00:32:26

поднимем наши надежные инструменты разработчика View,

00:32:29

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

00:32:33

D Vega и токен в нашем состоянии аутентификации,

00:32:38

мы говорим, используйте аутентификацию здесь, дайте мне посмотреть,

00:32:42

если это просто тот случай, когда нам нужно

00:32:45

перезапустите это, чтобы npm запустил Dev

00:32:51

и debake, э-э,

00:32:54

пароль,

00:32:56

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

00:33:00

должна быть возможность пойти домой

00:33:04

[Музыка],

00:33:11

а не, если требуется аутентификация,

00:33:16

да, а не auth.user,

00:33:22

тогда идите сюда,

00:33:25

иначе у нас все будет хорошо,

00:33:29

все правильно, поэтому я думаю, что, вероятно, хочу

00:33:30

установить это значение на нет, но я знаю, что

00:33:32

возникла ошибка, поэтому давайте просто скажем, что если

00:33:35

оно не равно нашему,

00:33:38

если auth.user равно пустому, то

00:33:44

мы здесь, о, так что

00:33:46

мы не сохраняем это каждый раз раз

00:33:52

уж мы идем, теперь мы на

00:33:54

приборной панели, так что я думаю, что это был случай,

00:34:00

ладно, все прошло, это был случай, когда мы

00:34:03

хотим, чтобы это было нулевым,

00:34:06

поэтому давайте просто скажем здесь,

00:34:10

а затем

00:34:13

в нашем,

00:34:16

что это такое, извините,

00:34:19

здесь мы я хочу, чтобы это значение было нулевым,

00:34:24

и нет, на самом деле нас это не волнует,

00:34:27

верно, поэтому я хочу, чтобы оно было нулевым,

00:34:31

поэтому этот пользователь точки,

00:36:05

окей, я все еще здесь,

00:36:07

давай,

00:36:09

ну, давай просто сделаем это, я

00:36:12

перевернусь отключить строгие нулевые проверки,

00:36:16

тогда все в порядке, так что теперь, если я

00:36:22

продолжу и войду в систему,

00:36:24

пароль,

00:36:26

который работает, теперь я могу получить доступ к

00:36:29

панели управления,

00:36:30

так здорово, так что теперь единственное, что

00:36:33

нам нужно, это функция выхода из системы, так что давайте

00:36:36

вернитесь сюда,

00:36:38

и у нас есть

00:36:41

это наша функция входа в систему,

00:36:45

поэтому нам нужна функция выхода из системы, и в

00:36:48

функции выхода из системы мы, по сути, просто

00:36:50

установим для этого пользователя с точкой обнуление, этот

00:36:54

токен станет пустым, и мы собираемся

00:36:57

подтолкнуть вас вернемся к входу в систему,

00:37:00

поэтому D Vega

00:37:03

пароль

00:37:06

нет, поэтому мы

00:37:10

видим, что наш объект аутентификации здесь имеет

00:37:12

правильные свойства,

00:37:14

и тогда я могу продолжить и выйти из системы, а это

00:37:17

на самом деле еще ничего не делает,

00:37:19

так что сейчас подходящее время пойти дальше

00:37:22

и исправить это, так где же это

00:37:25

приложение, у нас есть выход из системы, так как мы можем исправить,

00:37:29

что мы можем просто сказать

00:37:32

const store, как на самом деле, скажем, аутентификация

00:37:36

равна использованию хранилища аутентификации,

00:37:41

поэтому мы извлекаем хранилище аутентификации и тогда

00:37:43

мы могли бы сказать функциональный выход из системы, а затем

00:37:46

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

00:37:50

работает ли это,

00:37:58

пожалуйста, не делайте это каждый раз,

00:38:02

давайте посмотрим, как установлено много магазинов,

00:38:06

используйте выход из системы с точкой аутентификации в магазине,

00:38:11

о, нам нужно вернуть это, поэтому нажмите

00:38:16

выходим из системы,

00:38:20

хорошо, и мы идем

00:38:22

Школа, мы движемся прямо сейчас, вы

00:38:25

можете спросить себя, почему он

00:38:27

сбрасывается каждый раз,

00:38:30

так что это

00:38:32

в том, что если мы посмотрим на View devtools, у нас

00:38:36

есть этот токен, у нас есть этот пользователь,

00:38:41

что происходит, почему, когда Я обновляю его,

00:38:44

они очищаются, чтобы

00:38:47

проиллюстрировать, что я добавил новый маршрут

00:38:49

для косой черты, это просто страница «О программе»,

00:38:51

поэтому, если я захожу на страницу «О программе» или на панель управления, мне

00:38:55

все равно приходится войти в систему, поэтому, если я перейду к D Vega,

00:38:58

пароль войдите в систему, я попадаю на панель управления,

00:39:01

потому что это наш маршрут по умолчанию, но

00:39:04

теперь я могу перейти к разделу About, а затем

00:39:06

вернуться к панели управления и перейти к разделу About, и

00:39:08

вы увидите, что состояние сохраняется между

00:39:10

ними, это потому, что мы находимся в

00:39:13

одностраничном приложении теперь, как только я перезагружу

00:39:16

страницу, вы увидите, что это состояние исчезло,

00:39:19

поэтому есть несколько разных способов

00:39:20

справиться с этой пиной, у нее есть

00:39:26

экосистема плагинов, так что вы можете написать свой собственный

00:39:29

плагин или извлечь плагины, в основном, так,

00:39:31

как что вы справитесь с этим, вы

00:39:33

знаете, извлеките это, извлеките это,

00:39:35

а затем вы можете сделать

00:39:38

это по-своему здесь, в любом случае решение

00:39:40

этой проблемы - использовать локальное хранилище, теперь

00:39:43

вы можете сделать это самостоятельно здесь,

00:39:47

и мы' Я собираюсь попробовать, поэтому

00:39:50

я хочу сделать здесь пользователя, которому я

00:39:53

хочу сказать, что элемент локального хранилища dot get

00:39:57

является пользователем, или он будет нулевым,

00:40:02

так что подождите, вообще-то, давайте сделаем это, если это так, если есть

00:40:05

что-то в локальном хранилище хранилище

00:40:07

для получения элемента.

00:40:09

Я на самом деле хочу проанализировать,

00:40:13

что там есть, поэтому localstorage.get элемент

00:40:16

пользователя или нулевое право,

00:40:21

которое не похоже на то, что оно позволяет мне

00:40:24

это сделать, давайте сделаем это,

00:40:27

хорошо, это json.parse правильно, поэтому мы

00:40:32

извлекаем локальное хранилище там,

00:40:34

э-э, и есть простой способ сделать это,

00:40:40

вы можете сказать

00:40:43

нет,

00:40:48

верно, я хочу сказать,

00:40:51

либо получите это, либо это ноль,

00:40:55

я пропустил один,

00:40:57

я сделал все

00:41:00

в порядке, так что теперь я в основном

00:41:03

пытаюсь вытащить его из локального хранилища, если

00:41:05

он там, я собираюсь его проанализировать, а

00:41:08

затем, если это не так, я хочу установить нет, чтобы

00:41:10

я мог сделать почти то же самое

00:41:13

здесь,

00:41:14

поэтому для токена я просто скажу

00:41:20

токен

00:41:26

и токен,

00:41:28

окей,

00:41:31

да, и теперь то, что я хочу сделать, когда я

00:41:35

получу ответ обратно, мне нужно сделать, мне

00:41:38

нужно установить их правильно,

00:41:40

поэтому я также хочу, чтобы элемент набора точек в локальном хранилище

00:41:48

json.stringify равен токену, да, это

00:41:50

выглядит хорошо,

00:41:52

элемент localstorage.set, пользователь,

00:41:56

гм, а затем имя пользователя, да, это выглядит

00:41:58

хорошо теперь мне нужно извлечь это, создать

00:42:00

более простой метод для обработки обоих из

00:42:02

них, но

00:42:03

опять же, в реальном мире я, вероятно,

00:42:05

создал бы для этого плагин для Pina, но

00:42:08

я просто хочу попытаться сделать это

00:42:09

немного проще,

00:42:10

а потом может быть, здесь мы говорим «

00:42:14

да»,

00:42:16

поэтому, когда мы выходим из системы, нам также нужно

00:42:19

очистить их, поэтому мне также нужно сказать, что локальное

00:42:22

хранилище «Точка

00:42:25

удалить элемент

00:42:27

пользователя»,

00:42:29

а затем локальное хранилище «Точка удалить элемент элемента»,

00:42:33

так здорово, так что теперь, если я продолжу и перезагрузлю

00:42:36

это сейчас если я скажу d пароль Vega,

00:42:41

давайте продолжим и войдем в систему, мы вошли в систему,

00:42:44

поэтому у нас есть наш объект здесь, в Pina,

00:42:47

давайте перейдем на вкладку приложения и

00:42:50

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

00:42:54

токен и пользователь, так что теперь в

00:42:56

следующий раз, когда это перезагрузится,

00:42:59

он должен его найти, и он это делает, и он

00:43:02

возвращает его туда для нас, так здорово, что

00:43:06

теперь мы можем просматривать наше

00:43:09

одностраничное приложение, и мы также можем

00:43:11

сохраняться после перезагрузки страниц,

00:43:14

хорошо, хорошо, это собирается вместе, я хочу

00:43:17

сделать еще одну вещь,

00:43:19

поэтому здесь, в панели управления,

00:43:21

мы хотим перейти к нашему приложению загрузки Spring,

00:43:24

поэтому, если мы перейдем, если мы

00:43:26

вернемся к загрузке Spring в домашнем

00:43:29

контроллере, у

00:43:30

меня есть, о, у меня нет контроллер приборной панели

00:43:33

Я думал, что у меня есть просто

00:43:35

контроллер, который отправляет текст обратно, что это такое,

00:43:37

отправить обратно,

00:43:39

э-э, это должно вернуть это, так что давайте просто

00:43:43

попросим это, а, так что

00:43:47

давайте просто изменим

00:43:50

это на

00:43:52

это и перезапустим,

00:43:55

и мы должны получить это, так что я хочу что нужно

00:43:59

сделать сейчас, находится на панели управления. Я хочу

00:44:01

позвонить туда, но помните, что у нас есть

00:44:04

токен, и нам нужно отправить токен, поэтому

00:44:05

мы сначала попробуем это без токена,

00:44:07

а затем попробуем с

00:44:08

токеном,

00:44:09

поэтому const auth равно использованию хранилища аутентификации,

00:44:15

поэтому мы получаем, что

00:44:17

нам нужен токен, поэтому токен равен

00:44:21

токену auth.tok,

00:44:25

и давайте продолжим и настроим

00:44:27

здесь некоторые реактивные данные, в основном сообщение,

00:44:30

которое мы собираемся получить обратно, это будет

00:44:32

просто будьте ссылкой

00:44:36

на IntelliJ,

00:44:39

давайте посмотрим, что я хочу сделать,

00:44:41

хорошо, так что теперь я хочу сказать, что

00:44:45

размонтирован,

00:44:47

что я хочу сделать, я хочу сделать

00:44:50

асинхронный вызов, чтобы

00:44:54

получить, скажем, константный

00:44:57

ответ равно

00:45:00

выборке веса, теперь это будет локальный хост

00:45:05

8080,

00:45:08

и это просто корень, мы этого

00:45:12

не сделали, да, это просто корень,

00:45:14

поэтому мы собираемся попытаться получить это

00:45:16

сообщение

00:45:18

сейчас, в конечном итоге мы собираемся отправить несколько

00:45:22

заголовков здесь,

00:45:23

но я просто хочу посмотреть, что произойдет, когда

00:45:27

мы сделаем это без него,

00:45:29

чтобы мы могли сказать, что значение точки данных

00:45:32

равно весовому

00:45:35

ответу.txt,

00:45:37

так что давайте сначала попробуем это,

00:45:41

давайте попробуем перезагрузить это

00:45:44

размонтированное значение не определено, давайте продолжим

00:45:48

и импортируйте это,

00:45:53

и я собираюсь перезагрузить

00:45:56

локальный хост 8080 401, так что у нас здесь есть 401,

00:46:01

потому что мы не отправляем

00:46:03

токен вместе с ним, поэтому мы хотим сказать «

00:46:05

медведь авторизации», а затем вот

00:46:09

значение точки токена,

00:46:12

так что давайте продолжим и перезагрузим что

00:46:14

мы все еще получаем 401, давайте

00:46:17

посмотрим,

00:46:19

давайте выйдем из системы,

00:46:26

хорошо 401,

00:46:29

хорошо, поэтому мне интересно, из-за этого ли это, так что мы все

00:46:37

еще получаем 401,

00:46:42

мы отправляем пару авторизации, и вот

00:46:46

токен, э-э,

00:46:51

я не думаю, что

00:46:53

мы это сделаем нужно

00:47:02

да, мне не нужна ценность, я не знаю, почему

00:47:05

я подумал, что это не

00:47:07

реактивное свойство,

00:47:09

так что давайте попробуем это,

00:47:13

хорошо, 404, теперь это хорошо,

00:47:17

так что мы домашний контроллер контроллера отдыха,

00:47:23

давайте просто позвоним в этот дом и

00:47:25

убедимся, что наши Конфигурация безопасности разрешает

00:47:29

все остальное, просто аутентифицируется, о,

00:47:32

вы знаете, что я не

00:47:34

перезапустил это приложение,

00:47:37

так что, вероятно, это было так, поэтому я просто

00:47:40

скажу: «Домой здесь,

00:47:43

и давайте перезагрузим это, и мы получим

00:47:46

401, все равно

00:47:57

давайте выйдем из системы».

00:48:05

прямо сейчас мы занимаемся бизнесом,

00:48:09

поэтому теперь я не получаю сообщение об ошибке. Я

00:48:13

здесь. data.value равно этому, давайте

00:48:16

заменим это на данные

00:48:20

и

00:48:24

обновим это, и все готово, чтобы

00:48:26

сообщение пришло с нашего сервера сейчас, так что

00:48:30

это сообщение, которое приходит от

00:48:32

контроллера загрузки Spring, говорит «Привет»,

00:48:34

а затем оно получает фактический

00:48:36

принцип аутентификации и возвращает эту

00:48:38

строку,

00:48:39

так что ого, это было много, много чего

00:48:43

входит в это, я не знаю, если

00:48:44

что-то вроде реакции, или я конечно, vanilla

00:48:47

JS не делает это проще, но мне

00:48:51

интересно, делает ли кто-нибудь из них это

00:48:53

проще,

00:48:54

их здесь много, потому что

00:48:56

управление состоянием на стороне клиента

00:48:58

требует многого, и нам пришлось

00:49:00

настроить все, что нам нужно было установить создали совершенно

00:49:02

новый проект, нам нужно было настроить маршрутизацию,

00:49:04

чтобы мы могли идти по разным маршрутам, нам

00:49:06

нужно было настроить защиту маршрутизатора, чтобы мы могли

00:49:07

блокировать определенные маршруты, нам нужно было настроить

00:49:10

хранилище, чтобы мы могли иметь управление состоянием в

00:49:12

нашем приложении и нам нужно было настроить все

00:49:13

эти представления, и я настроил Tailwind, так что да,

00:49:16

там было много всего, что нужно, но

00:49:18

как только у вас будет этот общий подход, это

00:49:21

довольно легко, это красиво и просто,

00:49:24

и это просто работает, поэтому я очень надеюсь, что это

00:49:27

помогло. связать переднюю часть с

00:49:30

внутренней, когда дело доходит до аутентификации Spring Boot

00:49:33

JWT и как это сделать с

00:49:36

клиента, так что эй, если это помогло, если

00:49:39

вы нашли в этом ценность, друзья, сделайте мне

00:49:40

одолжение, поставьте мне палец вверх, подпишитесь на

00:49:42

канал и как всегда счастливые друзья-программисты,

00:49:46

начнём

00:49:49

[Музыка]

Описание:

In this tutorial, you will learn how to create a client (frontend) that will log in to your secure Spring Boot application with JSON Web Tokens (JWT). 🔗Resources & Links mentioned in this video: Github Repository: https://github.com/danvega/jwt-auth-demo Spring Security JWT Username & Password: https://youtu.be/UaB-0e76LdQ 👋🏻Connect with me: Website: https://www.danvega.dev Twitter: https://twitter.com/therealdanvega Github: https://github.com/danvega LinkedIn: https://www.linkedin.com/in/danvega Newsletter: https://www.danvega.dev/newsletter SUBSCRIBE TO MY CHANNEL: http://bit.ly/2re4GH0 ❤️

Готовим варианты загрузки

Популярные

HD видео

Только звук

Все форматы

* — Если видео проигрывается в новой вкладке, перейдите в неё, а затем кликните по видео правой кнопкой мыши и выберите пункт "Сохранить видео как..."

** — Ссылка предназначенная для онлайн воспроизведения в специализированных плеерах

Вопросы о скачивании видео

Как можно скачать видео "Spring Security JWT: Implementing the client (frontend) using Json Web Tokens (JWT)"?

Сайт http://unidownloader.com/ — лучший способ скачать видео или отдельно аудиодорожку, если хочется обойтись без установки программ и расширений. Расширение UDL Helper — удобная кнопка, которая органично встраивается на сайты YouTube, Instagram и OK.ru для быстрого скачивания контента.
Программа UDL Client (для Windows) — самое мощное решение, поддерживающее более 900 сайтов, социальных сетей и видеохостингов, а также любое качество видео, которое доступно в источнике.
UDL Lite — представляет собой удобный доступ к сайту с мобильного устройства. С его помощью вы можете легко скачивать видео прямо на смартфон.

Какой формат видео "Spring Security JWT: Implementing the client (frontend) using Json Web Tokens (JWT)" выбрать?

Наилучшее качество имеют форматы FullHD (1080p), 2K (1440p), 4K (2160p) и 8K (4320p). Чем больше разрешение вашего экрана, тем выше должно быть качество видео. Однако следует учесть и другие факторы: скорость скачивания, количество свободного места, а также производительность устройства при воспроизведении.

Почему компьютер зависает при загрузке видео "Spring Security JWT: Implementing the client (frontend) using Json Web Tokens (JWT)"?

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

Как скачать видео "Spring Security JWT: Implementing the client (frontend) using Json Web Tokens (JWT)" на телефон?

Вы можете скачать видео на свой смартфон с помощью сайта или pwa-приложения UDL Lite. Также есть возможность отправить ссылку на скачивание через QR-код с помощью расширения UDL Helper.

Как скачать аудиодорожку (музыку) в MP3 "Spring Security JWT: Implementing the client (frontend) using Json Web Tokens (JWT)"?

Самый удобный способ — воспользоваться программой UDL Client, которая поддерживает конвертацию видео в формат MP3. В некоторых случаях MP3 можно скачать и через расширение UDL Helper.

Как сохранить кадр из видео "Spring Security JWT: Implementing the client (frontend) using Json Web Tokens (JWT)"?

Эта функция доступна в расширении UDL Helper. Убедитесь, что в настройках отмечен пункт «Отображать кнопку сохранения скриншота из видео». В правом нижнем углу плеера левее иконки «Настройки» должна появиться иконка камеры, по нажатию на которую текущий кадр из видео будет сохранён на ваш компьютер в формате JPEG.

Сколько это всё стоит?

Нисколько. Наши сервисы абсолютно бесплатны для всех пользователей. Здесь нет PRO подписок, нет ограничений на количество или максимальную длину скачиваемого видео.