Создание понятного, интуитивно понятного пользовательского интерфейса является ключевой частью проектирования веб-приложений. Однако исторически это было непросто, потому что у веб-приложений нет общего языка дизайна, как у настольных приложений.
Введите дизайн материала. Google выпустила Material Design в 2014 году с целью создания единого пользовательского интерфейса для устройств Android и веб-приложений. В дизайне материалов есть компоненты, которые разработчики могут использовать для приложений Android и JavaScript.
Материал Дизайн стал очень популярным. Разработчики создали библиотеки, которые включают компоненты Material Design в существующие платформы. В приложениях Angular вы можете использовать библиотеку Angular-Material, которая делает все компоненты Material доступными для ваших шаблонов Angular. Суть в том, что вы используете Material Design в своем приложении, вы должны обязательно использовать его во всех частях вашего приложения — в конце концов, это общий язык дизайна.
Когда вы создаете свое следующее приложение, вы можете использовать сервис единой регистрации, такой как Okta . В конфигурации по умолчанию Okta перенаправляет пользователей на размещенную страницу входа и перенаправляет их обратно в приложение после успешного входа. Если вы используете Material Design со своим приложением, вы можете создать собственную форму входа в систему, соответствующую остальному приложению, но вы все равно можете сделать это с Okta!
В этом уроке я покажу вам, как создать форму входа, подобную приведенной выше. Вы создадите приложение Angular, воспользуетесь Material Design и сделаете так, чтобы оно требовало входа пользователя. Okta предоставляет библиотеку специально для приложений Angular, но я буду использовать okta-auth-jsбиблиотеку более низкого уровня . Эта библиотека позволяет вам иметь полный контроль над вашим HTML и просто обрабатывает связь с API Okta. Все JavaScript-библиотеки Okta построены на основе okta-auth-js. Чтобы сделать приложение немного интереснее, я создам небольшую игру в крестики-нолики, которая будет защищена с помощью Okta для аутентификации.
Создайте приложение Angular Material с безопасным входом
Для начала вам необходимо установить инструмент командной строки Angular. Я предполагаю, что вы немного знакомы с JavaScript и что в вашей системе установлен Node вместе с менеджером пакетов Node npm. Откройте терминал и введите следующую команду.
Оболочка
1
npm install -g @angular/cli@8.3.21
В зависимости от вашей операционной системы вам, возможно, придется выполнить это с помощью sudoкоманды. Это установит в вашу систему инструмент командной строки Angular. Это позволяет использовать ngкоманду для настройки и управления приложениями Angular. Чтобы создать новое приложение, перейдите в каталог по вашему выбору и выполните следующее.
Оболочка
xxxxxxxxxx
1
ng new material-tic-tac-toe
Вам будут заданы два вопроса. Ответьте Да на первый вопрос. Это будет включать и настроить маршрутизатор в вашем приложении. Маршрутизатор отвечает за предоставление пользователю возможности перемещаться между различными частями приложения и обновлять URL браузера без фактической перезагрузки страницы. Для второго вопроса примите выбор по умолчанию CSS . Это приложение будет использовать простые таблицы стилей CSS, но вы можете увидеть, как легко перейти на другую технологию таблиц стилей с Angular.
После завершения работы мастера вы увидите новую папку с именем material-tic-tac-toe. Перейдите в папку и установите несколько пакетов, которые вам понадобятся для приложения, выполнив команду ниже.
Оболочка
xxxxxxxxxx
1
npm install -E @angular/material@8.2.3 @angular/flex-layout@8.0.0-beta.27 hammerjs@2.0.8 @angular/cdk@8.2.3 tic-tac-toe-minimax@1.0.8
@angular/materialПакет содержит компоненты материала Design, @angular/cdkявляется одним из компонентов комплекта для разработки , который необходим для компонентов материала для работы и hammerjsэто библиотека , которая обеспечивает плавную анимацию для компонента. @angular/flex-layoutобеспечивает гибкую и отзывчивую сетку. Он не зависит от компонентов материала, но часто используется вместе с ним. Наконец, tic-tac-toe-minimaxготовая игра в крестики-нолики с компьютерным плеером.
Добавить угловой материал CSS
Компоненты Material не включают веб-шрифт для набора значков материалов. Чтобы использовать значки, откройте src/index.htmlв своей IDE и добавьте следующую строку внутри <head>тега.
HTML
xxxxxxxxxx
1
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
Чтобы сделать приложение hammerjsдоступным, откройте src/main.tsи добавьте следующий импорт в начало файла.
Оболочка
xxxxxxxxxx
1
import 'hammerjs';
Затем добавьте таблицу стилей Material Design в ваше приложение. Откройте src/styles.cssи вставьте приведенный ниже код в файл.
CSS
xxxxxxxxxx
1
@import "~@angular/material/prebuilt-themes/deeppurple-amber.css";
2
body {
4
margin: 0;
5
font-family: sans-serif;
6
}
7
h1 {
9
text-align: center;
10
}
@importЗаявление импортирует преднастроенную тему в файл CSS. Я также добавил немного стилизации для bodyи h1элементов. Далее вам нужно импортировать все модули, которые вам понадобятся, в приложение.
Импорт угловых компонентов материалов
Откройте src/app/app.module.tsи добавьте импортируемые данные ниже в начало файла.
Джава
xxxxxxxxxx
1
import { FlexLayoutModule } from '@angular/flex-layout';
2
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
3
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
4
import { MatToolbarModule,
6
MatMenuModule,
7
MatIconModule,
8
MatButtonModule,
9
MatTableModule,
10
MatDividerModule,
11
MatProgressSpinnerModule,
12
MatInputModule,
13
MatCardModule,
14
MatSlideToggleModule,
15
MatSelectModule,
16
MatOptionModule} from '@angular/material';
Теперь прокрутите вниз в том же файле и найдите importsобъявление. Измените это, чтобы соответствовать следующему.
CSS
xxxxxxxxxx
1
imports: [
2
BrowserModule,
3
AppRoutingModule,
4
FlexLayoutModule,
5
FormsModule,
6
ReactiveFormsModule,
7
BrowserAnimationsModule,
8
MatToolbarModule,
9
MatInputModule,
10
MatCardModule,
11
MatMenuModule,
12
MatIconModule,
13
MatButtonModule,
14
MatTableModule,
15
MatDividerModule,
16
MatSlideToggleModule,
17
MatSelectModule,
18
MatOptionModule,
19
MatProgressSpinnerModule
20
],
Теперь, когда вы завершили все предварительные испытания, пришло время приступить к реализации игрового приложения.
Создайте игровую доску с угловым материалом
Начните с основного компонента приложения. Откройте src/app/app.component.htmlи замените содержимое по умолчанию следующим кодом.
HTML
xxxxxxxxxx
1
<mat-toolbar color="primary" class="expanded-toolbar">
2
<span>
3
<button mat-button routerLink="/">{{title}}</button>
4
<button mat-button routerLink="/"><mat-icon>home</mat-icon></button>
5
</span>
6
<div fxLayout="row" fxShow="false" fxShow.gt-sm>
7
<button mat-button routerLink="/login" *ngIf="!isAuthenticated">
8
<mat-icon>power_settings_new</mat-icon>
9
Login
10
</button>
11
<button mat-button *ngIf="isAuthenticated" (click)="logout()">
12
<mat-icon>exit_to_app</mat-icon>
13
Logout
14
</button>
15
<button mat-button routerLink="/game">
16
<mat-icon>gamepad</mat-icon>
17
Play
18
</button>
19
</div>
20
<button mat-button [mat-menu-trigger-for]="menu" fxHide="false" fxHide.gt-sm>
21
<mat-icon>menu</mat-icon>
22
</button>
23
</mat-toolbar>
24
<mat-menu x-position="before" #menu="matMenu">
25
<button mat-menu-item routerLink="/">
26
<mat-icon>home</mat-icon>
27
Home
28
</button>
29
<button mat-menu-item routerLink="/game">
30
<mat-icon>gamepad</mat-icon>
31
Play
32
</button>
33
<button mat-menu-item routerLink="/login" *ngIf="!isAuthenticated">
34
<mat-icon>power_settings_new</mat-icon>
35
Login
36
</button>
37
<button mat-menu-item *ngIf="isAuthenticated" (click)="logout()">
38
<mat-icon>exit_to_app</mat-icon>
39
Logout
40
</button>
41
</mat-menu>
42
<router-outlet></router-outlet>
Этот код содержит основную панель инструментов и меню приложения. Требуется только небольшое количество стайлинга. Вставьте следующее в src/app/app.component.css.
CSS
xxxxxxxxxx
1
.expanded-toolbar {
2
justify-content: space-between;
3
align-items: center;
4
}
Теперь откройте src/app/app.component.tsи измените заголовок компонента и добавьте isAuthenticatedсвойство. Содержимое файла должно выглядеть следующим образом.
CSS
xxxxxxxxxx
1
import { Component } from '@angular/core';
2
@Component({
4
selector: 'app-root',
5
templateUrl: './app.component.html',
6
styleUrls: ['./app.component.css']
7
})
8
export class AppComponent {
9
title = 'Tic Tac Toe';
10
isAuthenticated: boolean;
11
}
Снова откройте свой терминал и создайте два компонента home, gameзапустив команды ниже.
Оболочка
xxxxxxxxxx
1
ng generate component home
2
ng generate component game
homeКомпонент просто содержит заставку с названием игры. Замените содержимое src/app/home/home.component.htmlследующей строкой.
HTML
xxxxxxxxxx
1
<h1>Tic Tac Toe</h1>
gameКомпонент потребуется немного больше редактирования. Начните с шаблона и откройте src/app/game/game.component.html. Замените содержимое файла следующим кодом.
HTML
xxxxxxxxxx
1
<mat-card>
2
<mat-card-content>
3
<div [ngClass]="{'tic-tac-toe': true, playing: playing}">
4
<div class="game-field" *ngFor="let field of gameState; let i = index" (click)="makeHumanMove(i)">
5
{{field === 'X' || field === 'O' ? field : ''}}
6
</div>
7
</div>
8
</mat-card-content>
9
</mat-card>
10
<mat-card>
11
<mat-card-content>
12
<div *ngIf="playing">
13
<h3>Your Move</h3>
14
</div>
15
<div *ngIf="!playing">
16
<h3>{{winner || "Start a new game"}}</h3>
17
</div>
18
<button mat-raised-button color="primary" *ngIf="!playing" (click)="toggleGame(true)">Start</button>
19
<button mat-raised-button color="primary" *ngIf="playing" (click)="toggleGame(false)">Reset</button>
20
<mat-slide-toggle [(ngModel)]="computerFirst">Computer Moves First</mat-slide-toggle>
22
<mat-form-field>
24
<mat-label>Difficulty</mat-label>
25
<mat-select [(ngModel)]="difficulty">
26
<mat-option value="Easy">Easy</mat-option>
27
<mat-option value="Normal">Normal</mat-option>
28
<mat-option value="Hard">Hard</mat-option>
29
</mat-select>
30
</mat-form-field>
31
</mat-card-content>
32
</mat-card>
Код выше определил две карты. Верхняя карта содержит текущее состояние игры. Он также позволяет пользователю щелкнуть любое из полей, чтобы сделать ход. Нижняя карта содержит элементы управления игрой. Добавьте немного стиля, вставив следующий код в src/app/game/game.component.css.
CSS
xxxxxxxxxx
1
mat-card {
2
max-width: 400px;
3
margin: 2em auto;
4
text-align: center;
5
}
6
mat-card-content {
8
display: flex;
9
flex-direction: column;
10
justify-content: center;
11
align-items: center;
12
}
13
.tic-tac-toe {
15
width: 192px;
16
display: flex;
17
flex-wrap: wrap;
18
}
19
.game-field {
21
width: 48px;
22
height: 48px;
23
margin: 8px;
24
background-color: #f0f0f0;
25
line-height: 48px;
26
font-size: 32px;
27
font-weight: bold;
28
}
29
.playing .game-field {
31
cursor: pointer;
32
}
33
button, mat-slide-toggle {
35
margin-bottom: 2rem;
36
}
Реализуйте свою игровую логику с угловыми компонентами
Фактическая логика игры живет в src/app/game/game.component.ts. Он использует tic-tac-toe-minimaxбиблиотеку для расчета компьютерных ходов и определения победителя. Замените содержимое файла с кодом ниже.
CSS
xxxxxxxxxx
1
import { Component, OnInit } from '@angular/core';
2
import Minimax from 'tic-tac-toe-minimax';
3
const { GameStep } = Minimax;
4
@Component({
6
selector: 'app-game',
7
templateUrl: './game.component.html',
8
styleUrls: ['./game.component.css']
9
})
10
export class GameComponent implements OnInit {
11
public gameState: Array<number | string> = [0, 1, 2, 3, 4, 5, 6, 7, 8];
13
public winner: string;
14
public playing = false;
15
public computerFirst = false;
16
public difficulty: 'Easy'|'Normal'|'Hard' = 'Normal';
17
constructor() {}
19
ngOnInit() {
21
}
22
toggleGame(toggle: boolean) {
24
if (toggle === this.playing) {
25
return;
26
}
27
this.gameState = [0, 1, 2, 3, 4, 5, 6, 7, 8];
29
this.winner = undefined;
30
if (toggle && this.computerFirst) {
32
this.makeComputerMove();
33
}
34
this.playing = toggle;
36
}
37
makeComputerMove() {
39
const symbols = {
40
huPlayer: 'X',
41
aiPlayer: 'O'
42
};
43
const winnerMapping = {
45
huPlayer: 'Human Wins!',
46
aiPlayer: 'Computer Wins!',
47
draw: 'It\'s a Draw!'
48
};
49
const result = GameStep(this.gameState, symbols, this.difficulty);
51
this.gameState = result.board;
52
if (result.winner) {
54
this.winner = winnerMapping[result.winner];
55
this.playing = false;
56
}
57
}
58
makeHumanMove(field: number) {
60
if (!this.playing || typeof this.gameState[field] !== 'number') {
61
return;
62
}
63
this.gameState[field] = 'X';
65
this.makeComputerMove();
66
}
67
}
Для завершения игры вам нужно будет определить маршруты к двум компонентам.
Добавьте маршруты к вашим угловым компонентам
Откройте src/app/app-routing.module.tsи добавьте следующий импорт в начало файла.
Машинопись
xxxxxxxxxx
1
import { HomeComponent } from './home/home.component';
2
import { GameComponent } from './game/game.component';
Затем измените routesмассив, чтобы он соответствовал следующему.
Машинопись
xxxxxxxxxx
1
const routes: Routes = [
2
{
3
path: '',
4
component: HomeComponent
5
},
6
{
7
path: 'game',
8
component: GameComponent,
9
},
10
];
Это завершает реализацию игры. Теперь вы сможете открыть терминал и выполнить следующую команду:
Оболочка
xxxxxxxxxx
1
ng serve
Откройте браузер и перейдите к http://localhost:4200. Нажмите на ссылку Play в верхнем меню, и вы увидите полнофункциональную игру в крестики-нолики. Обратите внимание, что ссылка для входа еще не подключена. Если вы нажмете на нее, ничего не произойдет, и вы увидите сообщение об ошибке в консоли браузера.
Добавить безопасный вход в ваше угловое приложение
Прежде чем вы сможете начать реализацию страницы входа в систему, вам необходимо зарегистрироваться в Okta. Создать аккаунт просто и бесплатно. Просто откройте браузер и перейдите на https://developer.okta.com . Нажмите Создать бесплатную учетную запись и завершите процесс регистрации.
Когда вы закончите, вы будете перенаправлены на вашу панель разработчика Okta. Зарегистрируйте новое приложение, перейдя в Приложения > Добавить приложение . На следующем экране выберите « Одностраничное приложение» и нажмите « Далее» .
На следующем экране вы можете редактировать настройки приложения. Убедитесь, что номер порта 4200 и базовый URI http://localhost:4200/. Измените URI перенаправления входа на http://localhost:4200/login. Когда вы закончите, вы должны увидеть идентификатор клиента, который вам понадобится позже в вашем коде.
Вы будете внедрять форму входа в систему как часть вашего приложения. Прежде чем продолжить, несколько предупреждений. Если вы решили запустить производственную среду, в которой вы размещаете собственную форму входа, убедитесь, что вы используете безопасный протокол HTTPS и размещаете свой сайт с действующим сертификатом SSL. Кроме того, убедитесь, что вы никогда не сохраните данные для входа в переменную сеанса или в хранилище браузера. Если вы не примете необходимые меры безопасности, ваш сайт может быть уязвим для атак. Как упоминалось выше, вы не будете использовать какие-либо специфичные для Angular библиотеки Okta. Вместо этого установите okta-auth-jsпакет, открыв терминал в корневой папке проекта и введя следующую команду.
Оболочка
xxxxxxxxxx
1
npm install -E @okta/okta-auth-js@2.11.0
С этим вы готовы создать сервис аутентификации. В терминале введите следующую команду.
Оболочка
xxxxxxxxxx
1
ng generate service Auth
Теперь откройте только что созданный файл src/app/auth.service.ts. В этом файле происходит вся магия. Вставьте следующее содержимое в файл. Ниже я приведу пошаговый код.
Машинопись
xxxxxxxxxx
1
import { Injectable } from '@angular/core';
2
import { BehaviorSubject } from 'rxjs';
3
import { Router } from '@angular/router';
4
import OktaAuth from '@okta/okta-auth-js';
5
@Injectable({
7
providedIn: 'root'
8
})
9
export class AuthService {
10
private authClient = new OktaAuth({
11
issuer: 'https://{YourOktaDomain}/oauth2/default',
12
clientId: '{ClientId}'
13
});
14
public isAuthenticated = new BehaviorSubject<boolean>(false);
16
constructor(private router: Router) {
18
}
19
async checkAuthenticated() {
21
const authenticated = await this.authClient.session.exists();
22
this.isAuthenticated.next(authenticated);
23
return authenticated;
24
}
25
async login(username: string, password: string) {
27
const transaction = await this.authClient.signIn({username, password});
28
if (transaction.status !== 'SUCCESS') {
30
throw Error('We cannot handle the ' + transaction.status + ' status');
31
}
32
this.isAuthenticated.next(true);
33
this.authClient.session.setCookieAndRedirect(transaction.sessionToken);
35
}
36
async logout(redirect: string) {
38
try {
39
await this.authClient.signOut();
40
this.isAuthenticated.next(false);
41
this.router.navigate([redirect]);
42
} catch (err) {
43
console.error(err);
44
}
45
}
46
}
AuthServiceОпределяет элемент , authClientкоторый инициализируется быть OktaAuthобъектом. Этот объект инкапсулирует аутентификацию, управление сеансами и связь с серверами Okta. OktaAuthКонструктор имеет несколько опций. Здесь представлены опции issuerи clientId. В этих вариантах вам придется заменить {YourOktaDomain}свой домен Okta, который вы можете найти на панели инструментов Okta. В {ClientId}требует замен с идентификатором клиента вы получили при регистрации приложения с октом.
isAuthenticatedСвойство является поведение при условии , что отражает ли зарегистрирован пользователь или нет. AuthServiceТакже определяет три асинхронных методов. В checkAuthenticated()методе проверяет , существует ли сеанс пользователя и возвращает результат. Это также обновляет isAuthenticatedтему. login()Метод посылает знак-в запросе на сервер окта. В случае успеха пользователь проходит проверку подлинности, и сеанс устанавливается. logout()Метод будет выйти пользователь и перенаправить их на указанный маршрут.
Теперь, когда сервис работает, вы можете использовать его в компоненте приложения. Откройте src/app/app.component.tsи измените содержимое в соответствии с кодом ниже.
Машинопись
xxxxxxxxxx
1
import { Component, OnInit } from '@angular/core';
2
import { AuthService } from './auth.service';
3
@Component({
5
selector: 'app-root',
6
templateUrl: './app.component.html',
7
styleUrls: ['./app.component.css']
8
})
9
export class AppComponent implements OnInit {
10
title = 'Tic Tac Toe';
11
isAuthenticated: boolean;
12
constructor(public authService: AuthService) {
14
this.authService.isAuthenticated.subscribe(
15
(isAuthenticated: boolean) => this.isAuthenticated = isAuthenticated
16
);
17
}
18
async ngOnInit() {
20
this.isAuthenticated = await this.authService.checkAuthenticated();
21
}
22
logout() {
24
this.authService.logout('/');
25
}
26
}
Теперь isAuthenticatedпеременная инициализируется и обновляется службой аутентификации. И logout()метод выведет пользователя из системы и перенаправит его на домашнюю страницу.
Теперь создайте компонент входа в систему. В терминале выполните команду ниже.
Оболочка
xxxxxxxxxx
1
ng generate component login
Откройте src/app/login/login.component.htmlи добавьте следующую форму входа.
HTML
xxxxxxxxxx
1
<mat-card>
2
<mat-card-content>
3
<form [formGroup]="form" (ngSubmit)="onSubmit()">
4
<h2>Log In</h2>
5
<mat-error *ngIf="loginInvalid">
6
The username and password were not recognised
7
</mat-error>
8
<mat-form-field class="full-width-input">
9
<input matInput placeholder="Email" formControlName="username" required>
10
<mat-error>
11
Please provide a valid email address
12
</mat-error>
13
</mat-form-field>
14
<mat-form-field class="full-width-input">
15
<input matInput type="password" placeholder="Password" formControlName="password" required>
16
<mat-error>
17
Please provide a valid password
18
</mat-error>
19
</mat-form-field>
20
<button mat-raised-button color="primary">Login</button>
21
</form>
22
</mat-card-content>
23
</mat-card>
Все <mat-card>снова содержится в элементе. Обратите внимание, что <mat-form-field>каждый элемент содержит <input>как <mat-error>элемент, так и элемент. Эти <mat-error>работы бесшовна с проверкой формы угловой, чтобы обеспечить полезную обратную связь. Как вы уже могли догадаться, src/app/login/login.component.cssсодержит некоторые стили. Вставьте приведенный ниже код в файл.
CSS
xxxxxxxxxx
1
mat-card {
2
max-width: 400px;
3
margin: 2em auto;
4
text-align: center;
5
}
6
mat-form-field {
8
display: block;
9
}
Теперь откройте src/app/login/login.component.tsи вставьте в реализацию компонента входа в систему.
Машинопись
xxxxxxxxxx
1
import { Component, OnInit } from '@angular/core';
2
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
3
import { ActivatedRoute, Router } from '@angular/router';
4
import { AuthService } from '../auth.service';
5
@Component({
7
selector: 'app-login',
8
templateUrl: './login.component.html',
9
styleUrls: ['./login.component.css']
10
})
11
export class LoginComponent implements OnInit {
12
form: FormGroup;
13
public loginInvalid: boolean;
14
private formSubmitAttempt: boolean;
15
private returnUrl: string;
16
constructor(
18
private fb: FormBuilder,
19
private route: ActivatedRoute,
20
private router: Router,
21
private authService: AuthService
22
) {
23
}
24
async ngOnInit() {
26
this.returnUrl = this.route.snapshot.queryParams.returnUrl || '/game';
27
this.form = this.fb.group({
29
username: ['', Validators.email],
30
password: ['', Validators.required]
31
});
32
if (await this.authService.checkAuthenticated()) {
34
await this.router.navigate([this.returnUrl]);
35
}
36
}
37
async onSubmit() {
39
this.loginInvalid = false;
40
this.formSubmitAttempt = false;
41
if (this.form.valid) {
42
try {
43
const username = this.form.get('username').value;
44
const password = this.form.get('password').value;
45
await this.authService.login(username, password);
46
} catch (err) {
47
this.loginInvalid = true;
48
}
49
} else {
50
this.formSubmitAttempt = true;
51
}
52
}
53
}
Здесь мало что происходит. ngOnInit()устанавливает форму. Если пользователь уже аутентифицирован, он просит маршрутизатор перейти на другой URL-адрес. onSubmit()Функция обрабатывает данные формы. Он извлекает значения из элементов формы и пытается войти, используя AuthService.
Приложение почти готово. У вас есть служба аутентификации и форма входа в систему. Но вы также хотите запретить пользователю переходить к той части приложения, которую он не имеет права просматривать. Angular использует для этого маршрутную охрану. Создайте новый сервис, выполнив следующую команду в терминале.
Оболочка
xxxxxxxxxx
1
ng generate service AuthGuard
Охранник реализует CanActivateинтерфейс и должен реализовать canActivate()функцию. Заменить содержимое src/app/auth-guard.service.tsследующим.
Машинопись
xxxxxxxxxx
1
import { Injectable } from '@angular/core';
2
import { Router, CanActivate } from '@angular/router';
3
import { AuthService } from './auth.service';
4
@Injectable({
6
providedIn: 'root'
7
})
8
export class AuthGuardService implements CanActivate {
9
constructor(public authService: AuthService, public router: Router) {}
11
async canActivate() {
13
if (!await this.authService.checkAuthenticated()) {
14
await this.router.navigate(['login']);
15
return false;
16
}
17
return true;
18
}
19
}
Наконец, добавьте loginмаршрут и защиту маршрута в настройку маршрутизатора. Откройте src/app/app-routing.module.tsснова и добавьте два импорта ниже.
Машинопись
xxxxxxxxxx
1
import { LoginComponent } from './login/login.component';
2
import { AuthGuardService } from './auth-guard.service';
Теперь измените routesмассив так, чтобы он выглядел следующим образом.
Машинопись
xxxxxxxxxx
1
const routes: Routes = [
2
{
3
path: '',
4
component: HomeComponent
5
},
6
{
7
path: 'login',
8
component: LoginComponent
9
},
10
{
11
path: 'game',
12
component: GameComponent,
13
canActivate: [ AuthGuardService ]
14
},
15
];
Отлично, вот и все. Приложение завершено!
Когда вы запустите ng serveкоманду и перейдете к ней http://localhost:4200, теперь вы сможете войти и выйти из приложения. Форма входа использует Material Design и должна выглядеть примерно так, как показано ниже.
Сделайте Угловые Испытания Пройдите С Угловым Материалом
Вы сгенерировали много кода в этом уроке. Когда вы создавали компоненты, тесты были созданы и для этих компонентов. Тесты просто проверяют рендеринг компонентов. Если вы запустите ng test, большинство из них потерпит неудачу, потому что в тестах нет импорта для добавленных вами компонентов. Если вы хотите увидеть, что нужно для того, чтобы все тесты прошли успешно, посмотрите этот коммит .
Узнайте больше об угловых материалах и безопасном входе
В этом руководстве я показал вам, как реализовать собственную форму входа в приложение Angular с использованием Material Design и библиотеки Angular Material. Кодирование вашей собственной формы может быть жизнеспособным вариантом, если вы хотите представить единообразный пользовательский интерфейс. Большая часть этого учебника может быть использована для других библиотек дизайна и не ограничивается Материальным дизайном, но стандарт Материального дизайна Google, вероятно, является одним из наиболее признанных стандартов пользовательского интерфейса в настоящее время. Его использование улучшит удобство использования вашего веб-приложения.
Вы можете скачать код для этого урока из oktadeveloper / okta-angular-material-login-example .
Если вы хотите узнать больше об Angular, Material Design или способах использования Okta с Angular, не стесняйтесь проверять ссылки ниже.
- Создайте приложение CRUD с Angular 9 и Spring Boot 2.2
- Как настроить угловую сборку с помощью Webpack
- Создайте безопасный вход для своего углового приложения
- Создайте простое веб-приложение с Express, Angular и GraphQL
Как обычно, следите за нами @oktadev в Твиттере и подпишитесь на наш канал на YouTube, чтобы получить еще больше отличного контента!