Разработка сервиса

Далее необходимо при нажатии кнопки отправить запрос, проверить валидность полей и получить ответ от сервера. Если все введено правильно мы перенаправляем пользователя дальше, если нет – выдаём ошибку.

За общение с сервером отвечает отдельная сущность – сервисы.

В файле бд – db.json, у пользователя есть поля: id, email, password, name. Опираясь на эти данные создаём новый сервис.

В папке shared создаём новую папку services и в ней файл users.service.ts. Сервисы — это так же обычные класссы. Нам нужно в конструктор класса инжектировать HTTP объект, и добавить декоратор Injectable, необходимый для работы сервиса. (Рисунок 27)

Далее создаём модель пользователя. В папке shared создаём папку models и в ней файл user.model.ts. Здесь будем описывать класс, с помощью которого будем описывать модель пользователя, (Рисунок 28)

Переходим в user сервис и прописываем методы.

Получение пользователя по email, в нем возвращаем http объект, прописываем порт, к которому нужно обратиться, и массив в БД. Затем прописываем условие, например email который мы укажем. Затем прописываем, метод, который будет возвращаться Observable<user>, который будет возвращать в себе пользователя. Далее, что бы не было ошибки создаём метод map, который будет возвращать responsive.json, для того, чтобы Angular преобразовал строку с сервера в нормальный javascript объект. (Рисунок 29).

Определяем метод map.В файле main.ts импортируем библиотеку rxjs. (Рисунок 30).

Сервис готов. Далее регистрируем его в app модуле в массив providers. И объявляем в login компоненте (Рисунок 31)

Далее используем его в методt onSubmit. Кладём форму в переменную formData, затем обращаемся к сервису, вызываем метод getUserByEmail() передаём ему email.(Рисунок 32)

Чтобы запрос корректно обрабатывался, нужно прописать его в этот поток данных. Для этого принимаем данные пользователя (user). Так же импортируем user шапке.(Рисунок 33)

Теперь при вводе в форму входа данных, которые уже есть в базе данных, будет выдаваться массив со всеми полями (данными) пользователя (можно проверить через консоль). Этот массив необходимо преобразовать в объект. Для этого в user сервисе создаём еще один метод map. И в нем будем проверять, если у пользователя есть нулевой элемент, то возвращаем его, если нет, то возвращаем undefined, чтобы выполнились все проверки.(Рисунок 34)

Теперь в login компоненте проверяем, если у нас user, то будем осуществлять проверку, если нет – то выводить ошибку. Далее, если пользователь существует, то проверяем его пароль (строка 32).

В случае не успешной проверки пароля выводим ошибку (строка 34-35). (Рисунок 35)

Теперь стилизуем вывод ошибки при неверном вводе пароля в шаблоне login компонента создаём переменную massage – это будет сообщение об ошибке, а в шаблоне создадим div в которой будем передавать это сообщение (Рисунок 36)

Для данного сообщения создадим общий интерфейс. В папке sheader>models создаём файл massage.model.ts. В конструкторе описываем поля, которые есть у класса (Рисунок 37)

В шаблоне login компонента дописываем класс созданному div тегу, и определяем, что данные класс (который и будет выводить ошибку) будет применятся в том случае, если у нас будет massagetext, который вызывается при неверных данных. (Рисунок 38)

Далее в login компоненте определим данный message. Прописываем тип, и импортируем его из massage модуля(Рисунок 39)

Затем после метода ngOnInist создаём приватный метод showMassage, это будет текст ошибки. Передаём в него type и text и задаём таймаут.(Рисунок 40)

Инициализируем этот объект в ngOnInit (Рисунок 41)

Далее в login компоненте заменяем созданные вручную ошибки на метод showMassage (Рисунок 42)

Теперь все сообщения об ошибках и сообщениях будут выводится через данный метод.

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

Для авторизации необходимо создание нескольких сервисов.

В папке shared создаём сервис auth.service.ts. Создаём поле, которое будет отвечать за состояние авторизации, метод login, который будет менять созданное поле на true, метод logout, меняет значение поля на false, метод isLoggedIn, проверяет данное поле (Рисунок 43).

Регистрируем его в app модуле. В самом сервисе в методе logout будем использовать localStorage, который может локально в браузере хранить информацию и с помощью этой информации мы будем получать доступ к объекту user в самой системе (Рисунок 44)

Подключаем сервис в login компоненте и импортируем туда. (Рисунок 45)

Теперь в методе onSubmit() обращаемся к данному сервису. Добавляем в объект localStorage как строку при помощи метода stringufy (строка 10) (оборачивает объекты в строки).(Рисунок 46)

Теперь активируем ссылку Зрегистрироваться. Для этого в шаблоне login компонента указываем ссылку на регистрацию (Рисунок 47)