پس از ایجاد AuthService
در قسمت قبل، اکنون می‌خواهیم از آن برای تکمیل صفحه‌ی ورود به سیستم و همچنین تغییر منوی بالای برنامه یا همان کامپوننت header استفاده کنیم.
ایجاد ماژول Dashboard و تعریف کامپوننت صفحه‌ی محافظت شده
قصد داریم پس از لاگین موفق، کاربر را به یک صفحه‌ی محافظت شده هدایت کنیم. به همین جهت ماژول جدید Dashboard را به همراه کامپوننت یاد شده، به برنامه اضافه میکنیم:
>ng g m Dashboard -m app.module --routing
>ng g c Dashboard/ProtectedPage
پس از اجرای این دستورات، ابتدا به فایل app.module.ts مراجعه کرده و تعریف این ماژول را که به صورت خودکار به قسمت imports اضافه شدهاست، به قبل از AppRoutingModule منتقل میکنیم تا مسیریابی‌های آن توسط catch all ماژول AppRouting لغو نشوند:
import { DashboardModule } from "./dashboard/dashboard.module";
@NgModule({
imports: [
//...
DashboardModule,
AppRoutingModule
]
})
export class AppModule { }
همچنین به فایل dashboard-routing.module.ts ایجاد شده مراجعه کرده و مسیریابی کامپوننت جدید ProtectedPage را اضافه میکنیم:
import { ProtectedPageComponent } from "./protected-page/protected-page.component";
const routes: Routes = [
{ path: "protectedPage", component: ProtectedPageComponent }
]; ایجاد صفحه‌ی ورود به سیستم در قسمت اول این سری، کارهای «ایجاد ماژول Authentication و تعریف کامپوننت لاگین» انجام شدند. اکنون می‌خواهیم کامپوننت خالی لاگین را به نحو ذیل تکمیل کنیم:
export class LoginComponent implements OnInit {
model: Credentials = { username: "", password: "", rememberMe: false };
error = "";
returnUrl: string;
مدل login را همان اینترفیس Credentials تعریف شده‌ی در قسمت قبل درنظر گرفته‌ایم. به همراه دو خاصیت error جهت نمایش خطاها در ذیل قسمت لاگین و همچنین ذخیره سازی returnUrl در صورت وجود:
constructor(
private authService: AuthService,
private router: Router,
private route: ActivatedRoute) { }
ngOnInit() {
// reset the login status
this.authService.logout(false);
// get the return url from route parameters
this.returnUrl = this.route.snapshot.queryParams["returnUrl"];
}
AuthService را به سازنده‌ی کامپوننت لاگین تزریق کرده‌ایم تا بتوان از متدهای login و Logout آن استفاده کرد. همچنین از سرویس Router برای استفاده‌ی از متد navigate آن استفاده میکنیم و از سرویس ActivatedRoute برای دریافت کوئری استرینگ returnUrl، در صورت وجود، کمک خواهیم گرفت.
اکنون متد ارسال این فرم چنین شکلی را پیدا می‌کند:
submitForm(form: NgForm) {
this.error = "";
this.authService.login(this.model)
.subscribe(isLoggedIn => {
if (isLoggedIn) {
if (this.returnUrl) {
this.router.navigate([this.returnUrl]);
} else {
this.router.navigate(["/protectedPage"]);
}
}
},
(error: HttpErrorResponse) => {
console.log("Login error", error);
if (error.status === 401) {
this.error = "Invalid User name or Password. Please try again.";
} else {
this.error = `${error.statusText}: ${error.message}`;
}
});
}
در اینجا توسط وهله‌ی تزریق شده‌ی this.authService، کار فراخوانی متد login و ارسال شیء Credentials به سمت سرور صورت می‌گیرد. خروجی متد login یک Observable از نوع boolean است. بنابراین در صورت true بودن این مقدار و یا موفقیت آمیز بودن عملیات لاگین، کاربر را به یکی از دو صفحه‌ی protectedPage و یا this.returnUrl (در صورت وجود)، هدایت خواهیم کرد.
صفحه‌ی خالی protectedPage را در ابتدای بحث، در ذیل ماژول Dashboard ایجاد کردیم.
در سمت سرور هم در صورت شکست اعتبارسنجی کاربر، یک return Unauthorized صورت می‌گیرد که معادل error.status === 401 کدهای فوق است و در اینجا در قسمت خطای عملیات بررسی شدهاست.
قالب این کامپوننت نیز به صورت ذیل به model از نوع Credentials آن متصل شدهاست:
<div class="panel panel-default">
<div class="panel-heading">
<h2 class="panel-title">Login</h2>
</div>
<div class="panel-body">
<form #form="ngForm" (submit)="submitForm(form)" novalidate>
<div class="form-group" [class.has-error]="username.invalid && username.touched">
<label for="username">User name</label>
<input id="username" type="text" required name="username" [(ngModel)]="model.username"
#username="ngModel" class="form-control" placeholder="User name">
<div *ngIf="username.invalid && username.touched">
<div class="alert alert-danger" *ngIf="username.errors['required']">
Name is required.
</div>
</div>
</div>
<div class="form-group" [class.has-error]="password.invalid && password.touched">
<label for="password">Password</label>
<input id="password" type="password" required name="password" [(ngModel)]="model.password"
#password="ngModel" class="form-control" placeholder="Password">
<div *ngIf="password.invalid && password.touched">
<div class="alert alert-danger" *ngIf="password.errors['required']">
Password is required.
</div>
</div>
</div>
<div class="checkbox">
<label>
<input type="checkbox" name="rememberMe" [(ngModel)]="model.rememberMe"> Remember me
</label>
</div>
<div class="form-group">
<button type="submit" class="btn btn-primary" [disabled]="form.invalid ">Login</button>
</div>
<div *ngIf="error" class="alert alert-danger " role="alert ">
{{error}}
</div>
</form>
</div>
</div>
در اینجا خاصیت‌های نام کاربری، کلمه‌ی عبور و همچنین rememberMe مدل، از کاربر دریافت می‌شوند؛ به همراه بررسی اعتبارسنجی سمت کلاینت آنها؛ با این شکل:
برای آزمایش برنامه، نام کاربری Vahid و کلمه‌ی عبور 1234 را وارد کنید.
تکمیل کامپوننت Header برنامه
در ادامه، پس از لاگین موفق شخص، می‌خواهیم صفحه‌ی protectedPage را نمایش دهیم:
در این صفحه، Login از منوی سایت حذف شدهاست و بجای آن Logout به همراه «نام نمایشی کاربر» ظاهر شده‌اند. همچنین توکن decode شده به همراه تاریخ انقضای آن نمایش داده شده‌اند.
برای پیاده سازی این موارد، ابتدا از کامپوننت Header شروع میکنیم:
export class HeaderComponent implements OnInit, OnDestroy {
title = "Angular.Jwt.Core";
isLoggedIn: boolean;
subscription: Subscription;
displayName: string;
constructor(private authService: AuthService) { }
این کامپوننت وضعیت گزارش شده‌ی ورود شخص را توسط خاصیت isLoggedIn در اختیار قالب خود قرار می‌دهد. برای این منظور به سرویس AuthService تزریق شده‌ی در سازنده‌ی خود نیاز دارد.
اکنون در روال رخ‌دادگردان ngOnInit، مشترک authStatus می‌شود که یک
BehaviorSubject است و از آن جهت صدور رخ‌دادهای authService به تمام کامپوننت‌های مشترک به آن استفاده کرده‌ایم:
ngOnInit() {
this.subscription = this.authService.authStatus$.subscribe(status => {
this.isLoggedIn = status;
if (status) {
this.displayName = this.authService.getDisplayName();
}
});
}
Status بازگشت داده شده‌ی توسط آن از نوع boolean است و در صورت true بودن، خاصیت isLoggedIn را نیز true می‌کند که از آن در قالب این کامپوننت برای نمایش و یا مخفی کردن لینک‌های login و logout استفاده خواهیم کرد.
همچنین اگر این وضعیت true باشد، مقدار DisplayName کاربر را نیز از سرویس authService دریافت کرده و توسط خاصیت this.displayName در اختیار قالب Header قرار می‌دهیم.
در آخر برای جلوگیری از نشتی حافظه، ضروری است اشتراک به authStatus، در روال رخ‌دادگردان ngOnDestroy لغو شود:
ngOnDestroy() {
// prevent memory leak when component is destroyed
this.subscription.unsubscribe();
}
همچنین در قالب Header، مدیریت دکمه‌ی Logout را نیز انجام خواهیم داد:
logout() {
this.authService.logout(true);
}
با این مقدمات، قالب Header اکنون به صورت ذیل تغییر می‌کند:
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" [routerLink]="['/']">{{title}}</a>
</div>
<ul class="nav navbar-nav">
<li class="nav-item" routerLinkActive="active" [routerLinkActiveOptions]="{ exact: true }">
<a class="nav-link" [routerLink]="['/welcome']">Home</a>
</li>
<li *ngIf="!isLoggedIn" class="nav-item" routerLinkActive="active">
<a class="nav-link" queryParamsHandling="merge" [routerLink]="['/login']">Login</a>
</li>
<li *ngIf="isLoggedIn" class="nav-item" routerLinkActive="active">
<a class="nav-link" (click)="logout()">Logoff [{{displayName}}]</a>
</li>
<li *ngIf="isLoggedIn" class="nav-item" routerLinkActive="active">
<a class="nav-link" [routerLink]="['/protectedPage']">Protected Page</a>
</li>
</ul>
</div>
</nav>
در اینجا توسط ngIfها وضعیت خاصیت isLoggedIn این کامپوننت را بررسی میکنیم. اگر true باشد، Logoff به همراه نام نمایشی کاربر را در منوی راهبری سایت ظاهر خواهیم کرد و در غیراینصورت لینک به صفحه‌ی Login را نمایش می‌دهیم.
تکمیل کامپوننت صفحه‌ی محافظت شده
در تصویر قبل، نمایش توکن decode شده را نیز مشاهده کردید. این نمایش توسط کامپوننت صفحه‌ی محافظت شده، مدیریت می‌شود:
import { Component, OnInit } from "@angular/core";
import { AuthService } from "../../core/services/auth.service";
@Component({
selector: "app-protected-page",
templateUrl: "./protected-page.component.html",
styleUrls: ["./protected-page.component.css"]
})
export class ProtectedPageComponent implements OnInit {
decodedAccessToken: any = {};
accessTokenExpirationDate: Date = null;
constructor(private authService: AuthService) { }
ngOnInit() {
this.decodedAccessToken = this.authService.getDecodedAccessToken();
this.accessTokenExpirationDate = this.authService.getAccessTokenExpirationDate();
}
}
در اینجا به کمک سرویس تزریقی AuthService، یکبار با استفاده از متد getDecodedAccessToken آن، مقدار اصلی توکن را و بار دیگر توسط متد getAccessTokenExpirationDate آن، تاریخ انقضای توکن دریافتی از سمت سرور را نمایش می‌دهیم؛ با این قالب:
<h1>
Decoded Access Token
</h1>
<div class="alert alert-info">
<label> Access Token Expiration Date:</label> {{accessTokenExpirationDate}}
</div>
<div>
<pre>{{decodedAccessToken | json}}</pre>
</div>
کدهای کامل این سری را از اینجا می‌توانید دریافت کنید.
برای اجرای آن فرض بر این است که پیشتر Angular CLI را نصب کرده‌اید. سپس از طریق خط فرمان به ریشه‌ی پروژه‌ی ASPNETCore2JwtAuthentication.AngularClient وارد شده و دستور npm install را صادر کنید تا وابستگی‌های آن دریافت و نصب شوند. در آخر با اجرای دستور ng serve -o، برنامه ساخته شده و در مرورگر پیش فرض سیستم نمایش داده خواهد شد (و یا همان اجرای فایل ng-serve.bat). همچنین باید به پوشه‌ی ASPNETCore2JwtAuthentication.WebApp نیز مراجعه کرده و فایل dotnet_run.bat را اجرا کنید، تا توکن سرور برنامه نیز فعال شود.
