Russian (Pусский) translation by Masha Kolesnikova (you can also view the original English article)
Безопасность является важной частью каждого веб-приложения, и разработчики должны убедиться, что они разрабатывают приложения с безопасной аутентификацией. В этом руководстве вы узнаете, как реализовать аутентификацию на основе JWT в приложениях Angular с помощью простого сервера Express.
Полный код можно найти в нашем репозитории GitHub. Приложение, которое мы будем создавать, будет выглядеть так:

Концепция веб-токенов JSON
JSON Web Token (JWT) - это в основном объект, представленный тремя строками, которые используются для передачи пользовательской информации. Три строки, разделенные точками:
- заголовок
- полезная нагрузка
- подпись
Когда пользователь входит на любую веб-страницу со своим именем пользователя и паролем, сервер аутентификации обычно создает и отправляет обратно JWT. Затем этот JWT передается вместе с последующими вызовами API на сервер. JWT остается в силе, пока не истечет срок его действия или пользователь не выйдет из приложения.
Этот процесс может быть проиллюстрирован на диаграмме ниже.

Файлы cookie и локальное хранилище
Мы будем использовать локальное хранилище для хранения токенов. Локальное хранилище - это средство, с помощью которого данные хранятся локально и могут быть удалены только через JavaScript или путем очистки кэша в браузере. Данные, хранящиеся в локальном хранилище, могут сохраняться очень долго. С другой стороны, файлы cookie - это сообщения, которые отправляются с сервера в браузер и имеют ограниченное хранилище.
Создание Express сервера
Мы начнем с создания внутреннего сервера, который будет иметь следующие конечные точки:
- POST <webservice>/login
- POST <webservice>/profile
Давайте начнем с создания каталога для приложения Express, а затем запустим команду npm init
, чтобы установить необходимые файлы для проекта.
mkdir server cd server npm init
Затем создайте файл server.js и установите модули: express
, jsonwebtoken
, cors
и bodyParser
.
touch server.js npm install express jsonwebtoken cors bodyParser –save
Теперь откройте server.js и начните с импорта модулей.
// server.js const cors = require('cors'); const bodyParser = require('body-parser'); const jwt = require('jsonwebtoken'); const express = require('express');
Затем создайте приложение Express и определите секретный ключ, который будет использоваться для кодирования и декодирования данных пользователя.
//CREATE EXPRESS APP const app = express(); app.use(cors()); app.use(bodyParser.json()); // DECLARE JWT-secret const JWT_Secret = 'your_secret_key';
Мы не будем использовать базу данных для этого примера. Тем не менее, концепции были бы похожи, если бы вы писали правильный сервер с поддержкой базы данных.
В нашем примере мы просто будем использовать переменную для определения тестового пользователя, как показано ниже.
var testUser = { email: 'kelvin@gmai.com', password: '1234'};
Последний шаг - создание маршрутов для аутентификации пользователя.
app.post('/api/authenticate', (req, res) => { if (req.body) { var user = req.body; console.log(user) if (testUser.email===req.body.email && testUser.password === req.body.password) { var token = jwt.sign(user, JWT_Secret); res.status(200).send({ signed_user: user, token: token }); } else { res.status(403).send({ errorMessage: 'Authorisation required!' }); } } else { res.status(403).send({ errorMessage: 'Please provide email and password' }); } });
Давайте разберем код для маршрута выше.
Сначала мы проверяем, есть ли какие-либо данные в теле запроса. Если данные не найдены, мы предлагаем пользователю ввести некоторые данные. В случае, когда пользователь предоставил правильные данные, мы сравниваем их с данными из testUser
и, если они совпадают, мы используем идентификатор пользователя, чтобы сгенерировать уникальный токен и отправить ответ пользователю.
Наконец, мы создаем конечную точку для запуска приложения.
app.listen(5000, () => console.log('Server started on port 5000'));
Наш бэкэнд теперь готов, и вы можете протестировать его с помощью Postman или CURL и посмотреть, какие данные будут возвращены пользователю.
Создайте приложение Angular
Наше приложение Angular будет содержать следующие страницы:
- Главная страница - эта страница будет содержать ссылки на страницы входа и профиля.
- Логин - на этой странице пользователь введет свой адрес электронной почты и пароль, которые будут отправлены на сервер для аутентификации. Если учетные данные верны, то будет возвращен токен JWT, и пользователь будет перенаправлен на страницу профиля.
- Профиль - это защищенная страница, доступ к которой может получить только пользователь с действительным токеном.
Создайте приложение Angular и создайте компоненты Login
и Profile
, как показано ниже:
ng new angular6jwt cd angular6jwt ng g component Login ng g component Profile
Затем добавьте код для домашней страницы в app.component.html.
<!--The content below is only a placeholder and can be replaced.--> <div style="text-align:center"> <ul> <li><a class="nav-link" routerLink="/" routerLinkActive="active">Home</a> </li> <li><a class="nav-link" routerLink="profile" routerLinkActive="active">Profile</a> </li> <li style="float:right" > <a class="nav-link" style="float:right" routerLink="login" routerLinkActive="active">Login</a> </li> <li style="float:right" > <a class ="nav-link" (click)="logout()" href="#">Logout</a></li> </ul> <div class="text-center"> <p> Angular 6 Authentication with JWT Tutorial </p> </div> <router-outlet></router-outlet>
Затем импортируйте RouterModule
и определите маршруты в app.module.ts.
import { RouterModule } from '@angular/router'; @NgModule({ declarations: [ AppComponent, LoginComponent, ProfileComponent ], imports: [ BrowserModule, RouterModule, FormsModule, RouterModule.forRoot([ { path: '', redirectTo: '/', pathMatch: 'full' }, { path: 'login', component: LoginComponent }, { path: 'profile', component: ProfileComponent } ]), ], providers: [], bootstrap: [AppComponent] }) export class AppModule { }
Создаем страницу входа
Страница входа будет содержать два поля ввода для адреса электронной почты и пароля, а также кнопку отправки, как показано ниже:
<h3>Login</h3> <div> <div class="spacer"> <label for="Email">Email</label> <input type="text" placeholder="Email" [(ngModel)]="email"> </div> <div class="spacer"> <label for="password">Password</label> <input type="password" placeholder="password" [(ngModel)]="password" class="form-control"/> </div> <div class="spacer"> <button type="submit" (click)="Login()">Login</button> </div> </div>
Создаем страницу профиля
Страница профиля будет просто сообщением, как показано ниже:
<p> If you can see this page, you are logged in! </p>
Авторизация с JWT в Angular
Мы начнем с создания сервиса Auth
, который облегчит проверку ввода пользователя и взаимодействия с сервером.
// Create authentication service named Auth ng g service Auth
Это создает два файла, но в основном нас заинтересует файл auth.service.ts, в который мы напишем весь код, взаимодействующий с сервером. Мы начнем с определения REST API и токена, как показано ниже:
export class AuthService { api = 'https://localhost:3000/api'; token; }
Далее мы напишем код, который выполняет POST-запрос к серверу с учетными данными пользователя. Здесь мы делаем запрос к API - если он успешен, мы сохраняем токен в localStorage
и перенаправляем пользователя на страницу профиля.
import { Injectable } from '@angular/core'; import { HttpClientModule, HttpClient } from '@angular/common/http'; import { Router } from '@angular/router'; @Injectable({ providedIn: 'root' }) export class AuthService { uri = 'http://localhost:5000/api'; token; constructor(private http: HttpClient,private router: Router) { } login(email: string, password: string) { this.http.post(this.uri + '/authenticate', {email: email,password: password}) .subscribe((resp: any) => { this.router.navigate(['profile']); localStorage.setItem('auth_token', resp.token); }) ); } }
Мы также определяем функции входа и выхода из системы, как показано ниже.
logout() { localStorage.removeItem('token'); } public get logIn(): boolean { return (localStorage.getItem('token') !== null); }
- logout - очищает токен от локального хранилища
- logIn - возвращает логическое свойство, которое определяет, аутентифицирован ли пользователь
Затем мы обновляем свойство logIn
на домашней странице, как показано.
<ul> <li><a class="nav-link" routerLink="/" routerLinkActive="active">Home</a> </li> <li><a class="nav-link" routerLink="profile" routerLinkActive="active" *ngIf="authService.logIn">Profile</a> </li> <li style="float:right" > <a class="nav-link" style="float:right" routerLink="login" routerLinkActive="active" *ngIf="!authService.logIn">Login</a> </li> <li style="float:right" > <a class ="nav-link" (click)="logout()" href="#" *ngIf="authService.logIn">Logout</a> </li> </ul>
Ответ на пользовательские события
Теперь, когда мы закончили с кодом, взаимодействующим с сервером, мы перейдем к обработке пользовательских событий для внешнего интерфейса.
Мы напишем функцию, которая будет прослушивать события щелчка со страницы входа в систему, а затем передавать значения в AuthService
для аутентификации пользователя. Обновите файл login.component.ts, чтобы он выглядел следующим образом:
import { Component, OnInit } from '@angular/core'; import { Router, ActivatedRoute } from '@angular/router'; import { AuthService } from '../auth.service'; @Component({ selector: 'app-login', templateUrl: './login.component.html', styleUrls: ['./login.component.css'] }) export class LoginComponent implements OnInit { email = ''; password = ''; constructor(private authService: AuthService) { } Login() { console.log("you are logging in") this.authService.login(this.email, this.password) } ngOnInit() { } }
Теперь, если вы запустите ng serve
и перейдете по адресу http://localhost:4200, вы можете протестировать свое приложение.
ng serve
Нажмите на ссылку для входа и введите учетные данные пользователя. Помните, действительные учетные данные определены в приложении Express. Теперь, когда вы нажмете кнопку входа в систему, вы будете перенаправлены на страницу профиля.
Заключение
Из этого руководства вы узнали, как начать работу с аутентификацией JWT в Angular. Теперь вы можете проходить аутентификацию и авторизацию с помощью JWT в ваших приложениях Angular. Есть много аспектов JWT, которые не были рассмотрены в этом руководстве - посмотрите, можете ли вы изучить некоторые из них самостоятельно!
Обратите внимание, что это руководство было написано для Angular 6, но те же концепции должны работать с Angular 2 или Angular 4.
Subscribe below and we’ll send you a weekly email summary of all new Code tutorials. Never miss out on learning about the next big thing.
Update me weeklyEnvato Tuts+ tutorials are translated into other languages by our community members—you can be involved too!
Translate this post