المصادقة في الواجهة الأمامية Angular Authentication
مرحباً بكم في هذا الموضوع الشيق ....
بداية سنقوم بإنشاء مكوّن جديد باسم login
ng g c login --module app
محتوى ملف الـ login.component.html
<div class="col-md-6 offset-md-3 mt-5">
<div class="alert alert-info">
Username: test<br />
Password: test
</div>
<div class="card">
<h4 class="card-header">Angular 10 Basic Authentication Example</h4>
<div class="card-body">
<form [formGroup]="loginForm" (ngSubmit)="onSubmit()">
<div class="form-group">
<label for="username">Username</label>
<input type="text" formControlName="username" [(ngModel)]="auth.username" class="form-control" [ngClass]="{ 'is-invalid': submitted && f.username.errors }" />
<div *ngIf="submitted && f.username.errors" class="invalid-feedback">
<div *ngIf="loginForm.controls['username'].hasError('required')">Username is required</div>
</div>
</div>
<div class="form-group">
<label for="password">Password</label>
<input type="password" formControlName="password" [(ngModel)]="auth.hash_raw_password" class="form-control" [ngClass]="{ 'is-invalid': submitted && f.password.errors }" />
<div *ngIf="submitted && f.password.errors" class="invalid-feedback">
<div *ngIf="loginForm.controls['password'].hasError('required')">Password is required</div>
</div>
</div>
<button [disabled]="loading" class="btn btn-primary">
<span *ngIf="loading" class="spinner-border spinner-border-sm mr-1"></span>
Login
</button>
<div *ngIf="error" class="alert alert-danger mt-3 mb-0">{{error}}</div>
<span>{{auth | json}}</span>
</form>
</div>
</div>
</div>
محتوى ملف الـ login.component.ts
import { Component, OnInit } from '@angular/core';
import { FormBuilder, Validators } from '@angular/forms';
import { Router, ActivatedRoute } from '@angular/router';
import { AuthenticationService } from 'src/app/services/authentication.service';
@Component({
selector: 'app-login',
templateUrl: './login.component.html',
styleUrls: ['./login.component.scss']
})
export class LoginComponent implements OnInit {
auth: any = { username: '', hash_raw_password: '' };
loginForm = this.formBuilder.group({
username: ['', Validators.required],
password: ['', Validators.required]
});
loading = false;
submitted = false;
returnUrl: string = "";
error = '';
constructor(
private formBuilder: FormBuilder,
private route: ActivatedRoute,
private router: Router,
private authenticationService: AuthenticationService
) {
// redirect to home if already logged in
// إعادة التوجيه إلى الصفحة الرئيسية إذا قمت بتسجيل الدخول بالفعل
if (this.authenticationService.userValue) {
this.router.navigate(['/']);
}
}
ngOnInit(): void {
this.loginForm = this.formBuilder.group({
username: ['', Validators.required],
password: ['', Validators.required]
});
// get return url from route parameters or default to '/'
//الحصول على عنوان url من معلمات المسار أو الافتراضي إلى
this.returnUrl = this.route.snapshot.queryParams['returnUrl'] || '/';
}
// convenience getter for easy access to form fields
// لسهولة الوصول إلى حقول النموذج
get f() { return this.loginForm.controls; }
onSubmit() {
this.submitted = true;
// stop here if form is invalid
if (this.loginForm.invalid) {
return;
}
this.loading = true;
this.authenticationService.login(this.auth.username, this.auth.hash_raw_password)
.subscribe(
data => {
this.router.navigate([this.returnUrl]);
},
error => {
this.error = error;
this.loading = false;
});
}
}
ثم سنقوم بإنشاء خدمة المصادقة Authentication Service
ng g service authentication
محتوى الـ authentication.service.ts
import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { Router } from '@angular/router';
import { BehaviorSubject, map, Observable } from 'rxjs';
@Injectable({
providedIn: 'root'
})
export class AuthenticationService {
backEndURL: string = "";
private userSubject: BehaviorSubject<any>;
public user: Observable<any>;
constructor(
private router: Router,
private http: HttpClient
) {
this.userSubject = new BehaviorSubject<any>(JSON.parse(localStorage.getItem('user') || '{}'));
this.user = this.userSubject.asObservable();
this.backEndURL = this.getBackEndUrl();
}
public get userValue(): any {
if (this.userSubject.value != '{}') {
return this.userSubject.value;
} else {
this.router.navigate(['/login']);
return null;
}
}
login(username: string, password: string) {
console.log(username)
let auth = {
username: username,
hash_raw_password: password
};
return this.http.post<any>(`${this.backEndURL}/auth`, auth)
.pipe(map(user => {
// store user details and basic auth credentials in local storage to keep user logged in between page refreshes
// user.authdata = window.btoa(username + ':' + password);
localStorage.setItem('user', JSON.stringify(user));
this.userSubject.next(user);
return user;
}));
}
logout() {
// remove user from local storage to log user out
localStorage.removeItem('user');
this.userSubject.next(null);
this.router.navigate(['/login']);
}
getBackEndUrl(): string {
const segements = document.URL.split('/');
const reggie = new RegExp(/localhost/);
return reggie.test(segements[2]) ? 'http://localhost:3000' : 'https://nestjs-typeorm-postgres.herokuapp.com';
}
}
بعد ذلك سنقوم بإنشاء مجلد helpers وإضافة الملفات التالية إليه
محتوى ملف auth.guard.ts
import { Injectable } from '@angular/core';
import { Router, CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router';
import { AuthenticationService } from '../services/authentication.service';
@Injectable({ providedIn: 'root' })
export class AuthGuard implements CanActivate {
constructor(
private router: Router,
private authenticationService: AuthenticationService
) { }
canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) {
const user = this.authenticationService.userValue;
if (user.username != null) {
// logged in so return true
return true;
} else {
// not logged in so redirect to login page with the return url
this.router.navigate(['/login']);//, { queryParams: { returnUrl: state.url } }
return false;
}
}
}
محتوى ملف basic-auth.interceptor.ts
import { Injectable } from '@angular/core';
import { HttpRequest, HttpHandler, HttpEvent, HttpInterceptor } from '@angular/common/http';
import { Observable } from 'rxjs';
import { environment } from '../../environments/environment';
import { AuthenticationService } from '../services/authentication.service';
@Injectable()
export class BasicAuthInterceptor implements HttpInterceptor {
backEndURL: string = "";
constructor(private authenticationService: AuthenticationService) {
this.backEndURL = this.getBackEndUrl();
}
intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
// add header with basic auth credentials if user is logged in and request is to the api url
const user = this.authenticationService.userValue;
const isLoggedIn = user && user.username;
const isApiUrl = request.url.startsWith(this.backEndURL);
if (isLoggedIn && isApiUrl) {
request = request.clone({
setHeaders: {
Authorization: `Basic ${user.username}`
}
});
}
return next.handle(request);
}
getBackEndUrl(): string {
const segements = document.URL.split('/');
const reggie = new RegExp(/localhost/);
return reggie.test(segements[2]) ? 'http://localhost:3000' : 'https://nestjs-typeorm-postgres.herokuapp.com';
}
}
محتوى ملف error.interceptor.ts
import { Injectable } from '@angular/core';
import { HttpRequest, HttpHandler, HttpEvent, HttpInterceptor } from '@angular/common/http';
import { Observable, throwError } from 'rxjs';
import { catchError } from 'rxjs/operators';
import { AuthenticationService } from '../services/authentication.service';
@Injectable()
export class ErrorInterceptor implements HttpInterceptor {
constructor(private authenticationService: AuthenticationService) { }
intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
return next.handle(request).pipe(catchError(err => {
if (err.status === 401) {
// auto logout if 401 response returned from api
this.authenticationService.logout();
}
const error = err.error.message || err.statusText;
return throwError(error);
}))
}
}
محتوى ملف ../helper/index.ts
export * from './auth.guard';
export * from './basic-auth.interceptor';
export * from './error.interceptor';
---------------------------------------------------------------------------------------------------------------------------
الملفات التي قمنا بتعديلها كالتالي:
تعديل محتوى الـ app-routing.module.ts
import { NgModule } from '@angular/core';
import { PreloadAllModules, RouterModule, Routes } from '@angular/router';
import { AboutMeComponent } from 'src/about-me/about-me.component';
import { CreateUserComponent } from './components/create-user/create-user.component';
import { UpdateUserComponent } from './components/update-user/update-user.component';
import { AuthGuard } from './helpers/auth.guard';
import { DashboardComponent } from './pages/dashboard/dashboard.component';
import { LoginComponent } from './pages/login';
import { ServicesComponent } from './pages/services/services.component';
import { StaffComponent } from './pages/staff/staff.component';
const routes: Routes = [
{ path: '', component: AboutMeComponent, canActivate: [AuthGuard] },
{ path: 'login', component: LoginComponent },
{ path: 'about-me', component: AboutMeComponent, canActivate: [AuthGuard] },
{ path: 'create-new-user', component: CreateUserComponent, canActivate: [AuthGuard] },
{ path: 'update-user/:id', component: UpdateUserComponent, canActivate: [AuthGuard] },
{ path: 'dashboard', component: DashboardComponent, canActivate: [AuthGuard] },
{ path: 'services', component: ServicesComponent, canActivate: [AuthGuard] },
{ path: 'staff', component: StaffComponent, canActivate: [AuthGuard] },
// otherwise redirect to home
{ path: '**', redirectTo: '' }
];
@NgModule({
imports: [RouterModule.forRoot(routes,
{
preloadingStrategy: PreloadAllModules, // <- comment this line for activate lazy load
relativeLinkResolution: 'legacy',
// useHash: true
})],
exports: [RouterModule]
})
export class AppRoutingModule { }
تعديل محتوى الـ app.component.html
<app-nav *ngIf="user.username != null;else other_content" dir="rtl"></app-nav>
<ng-template #other_content>
<app-login></app-login>
</ng-template>
تعديل محتوى الـ app.component.ts
import { Component } from '@angular/core';
import { AuthenticationService } from './services/authentication.service';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss']
})
export class AppComponent {
user: any;
constructor(
private authenticationService: AuthenticationService
) {
this.authenticationService.user.subscribe(x => this.user = x);
}
logout() {
this.authenticationService.logout();
window.location.reload();
}
title = 'portal';
}
تعديل محتوى الـ nav.component.html
<mat-sidenav-container class="sidenav-container">
<mat-sidenav #drawer class="sidenav" fixedInViewport [attr.role]="(isHandset$ | async) ? 'dialog' : 'navigation'"
[mode]="(isHandset$ | async) ? 'over' : 'side'" [opened]="(isHandset$ | async) === false">
<mat-toolbar>Menu</mat-toolbar>
<mat-nav-list>
<a mat-list-item routerLink="/dashboard">لوحة التحكم</a>
<a mat-list-item routerLink="/services">الخدمات</a>
<a mat-list-item routerLink="/staff">فريق العمل</a>
<a mat-list-item routerLink="/about-me">المستخدمين</a>
</mat-nav-list>
</mat-sidenav>
<mat-sidenav-content>
<mat-toolbar color="primary">
<button type="button" aria-label="Toggle sidenav" mat-icon-button (click)="drawer.toggle()"
*ngIf="isHandset$ | async">
<mat-icon aria-label="Side nav toggle icon">menu</mat-icon>
</button>
<span>{{'WEBSITE_NAME' | translate}}</span>
<app-lang></app-lang>
<mat-icon (click)="logout()" matToolTip="تسجيل الخروج">logout</mat-icon>
</mat-toolbar>
<!-- Add Content Here -->
<router-outlet></router-outlet>
</mat-sidenav-content>
</mat-sidenav-container>
تعديل محتوى الـ nav.component.ts
import { Component } from '@angular/core';
import { BreakpointObserver, Breakpoints } from '@angular/cdk/layout';
import { Observable } from 'rxjs';
import { map, shareReplay } from 'rxjs/operators';
import { AuthenticationService } from 'src/app/services/authentication.service';
import { Router } from '@angular/router';
@Component({
selector: 'app-nav',
templateUrl: './nav.component.html',
styleUrls: ['./nav.component.scss']
})
export class NavComponent {
user: any;
isHandset$: Observable<boolean> = this.breakpointObserver.observe(Breakpoints.Handset)
.pipe(
map(result => result.matches),
shareReplay()
);
constructor(private breakpointObserver: BreakpointObserver,
public authenticationService: AuthenticationService,
public router: Router) {
this.authenticationService.user.subscribe(x => this.user = x);
}
logout() {
this.authenticationService.logout();
window.location.reload();
}
}
تعديل محتوى الـ app.module.ts
import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AboutMeComponent } from 'src/about-me/about-me.component';
import { MatCardModule } from '@angular/material/card';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { HttpClient, HttpClientModule, HTTP_INTERCEPTORS } from '@angular/common/http';
import { MaterialModule } from './material.module';
import { NavComponent } from './components/nav/nav.component';
import { LayoutModule } from '@angular/cdk/layout';
import { MatToolbarModule } from '@angular/material/toolbar';
import { MatButtonModule } from '@angular/material/button';
import { MatSidenavModule } from '@angular/material/sidenav';
import { MatIconModule } from '@angular/material/icon';
import { MatListModule } from '@angular/material/list';
import { UsersTableComponent } from './components/users-table/users-table.component';
import { MatTableModule } from '@angular/material/table';
import { MatPaginatorModule } from '@angular/material/paginator';
import { MatSortModule } from '@angular/material/sort';
import { TranslateLoader, TranslateModule } from '@ngx-translate/core';
import { TranslateHttpLoader } from '@ngx-translate/http-loader';
import { DatePipe } from '@angular/common';
import { LangComponent } from './components/lang/lang.component';
import { CreateUserComponent } from './components/create-user/create-user.component';
import { MatInputModule } from '@angular/material/input';
import { MatSelectModule } from '@angular/material/select';
import { MatRadioModule } from '@angular/material/radio';
import { ReactiveFormsModule } from '@angular/forms';
import { UpdateUserComponent } from './components/update-user/update-user.component';
import { DashboardComponent } from './pages/dashboard/dashboard.component';
import { ServicesComponent } from './pages/services/services.component';
import { StaffComponent } from './pages/staff/staff.component';
import { LoginComponent } from './pages/login/login.component';
//-------------------------
import { ErrorInterceptor, BasicAuthInterceptor } from './helpers';
export function HttpLoaderFactory(http: HttpClient) {
return new TranslateHttpLoader(http, './assets/i18n/', '.json');
}
@NgModule({
declarations: [
AppComponent,
AboutMeComponent,
NavComponent,
UsersTableComponent,
LangComponent,
CreateUserComponent,
UpdateUserComponent,
DashboardComponent,
ServicesComponent,
StaffComponent,
LoginComponent,
],
imports: [
MaterialModule,
BrowserModule,
AppRoutingModule,
BrowserAnimationsModule,
MatCardModule,
HttpClientModule,
LayoutModule,
MatToolbarModule,
MatButtonModule,
MatSidenavModule,
MatIconModule,
MatListModule,
MatTableModule,
MatPaginatorModule,
MatSortModule,
TranslateModule.forRoot({
defaultLanguage: 'ar',
loader: {
provide: TranslateLoader,
useFactory: HttpLoaderFactory,
deps: [HttpClient]
}
}),
MatInputModule,
MatSelectModule,
MatRadioModule,
ReactiveFormsModule
],
schemas: [
CUSTOM_ELEMENTS_SCHEMA
],
providers: [
{ provide: HTTP_INTERCEPTORS, useClass: BasicAuthInterceptor, multi: true },
{ provide: HTTP_INTERCEPTORS, useClass: ErrorInterceptor, multi: true },
],
bootstrap: [AppComponent]
})
export class AppModule { }
تعديل محتوى الـ update-user.component.ts
user: any = {username:'', password:'', ar_name: '', en_name: '' };
المشكلة: Argument of type 'string | null' is not assignable to parameter of type 'string'.
JSON.parse(localStorage.getItem('user')
الحل: JSON.parse(localStorage.getItem('user') || '{}')
المشكلة: Expected 0 arguments, but got 1.
location.reload(true);
الحل: حذف true
مثال على هذه المهمة هنا
المشروعان اللذان عملنا عليهما في هذه الدورة:
الكود الأمامي: https://github.com/abu18saud/test_ang_project.git
الكود الخلفي: https://github.com/abu18saud/test-project.git
تعليقات
إرسال تعليق