ใช้งาน Route Guard กำหนด Authorized ให้ Route ใน Angular ตอนที่ 8

C:\projects\simplerouter>ng g module admin --routing

C:\projects\simplerouter>ng g c admin/admin --flat

C:\projects\simplerouter>ng g c admin/admin-center --flat

C:\projects\simplerouter>ng g c admin/manage-users --flat

C:\projects\simplerouter>ng g c admin/manage-products --flat

C:\projects\simplerouter>ng g module login --routing

C:\projects\simplerouter>ng g c login/login --flat

C:\projects\simplerouter>ng g service auth

C:\projects\simplerouter>ng g service auth-guard

import { Injectable } from '@angular/core';

// import ในส่วนที่จะใช้งานกับ Observable
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/observable/of';
import 'rxjs/add/operator/do';
import 'rxjs/add/operator/delay';

@Injectable()
export class AuthService {

  public isLoggedIn:boolean = false; // กำหนดสถานะล็อกอินเริ่มต้นเป็น false
  public redirectUrl: string; // กำหนดตัวแปรสำหรับเก็บ url ที่จะลิ้งค์ไป

  constructor() { }

  // ฟังก์ชั่นจำลองการล็อกอิน คืนค่าเป็น Observable
  login(): Observable<boolean> {
    // เมื่อล็อกอิน
    return Observable.of(true) // ให้คืนค่า true
    .delay(3000) // หลังจาก delay 3 วินาที
    .do(val => this.isLoggedIn = true); // เมื่อถึงเวลาให้กำหนดค่าสถานะเป็น true
  }
  
  // ฟังก์ชั่นจำลองการล็อกเอาท์
  logout(): void {
    // ให้ค่าสถานะล็อกอินเป็น false
    this.isLoggedIn = false;
  }  

}

การกำหนด CanActivate และ CanActivateChild

import { Injectable } from '@angular/core';
// import ส่วนที่จะใช้งาน guard เช่น CanActivate, CanActivateChild เป็นต้นมาใช้งาน
import {
  CanActivate, Router,
  ActivatedRouteSnapshot,
  RouterStateSnapshot,
  CanActivateChild
} from '@angular/router';
// import service ที่เช็คสถานะการล็อกอินมาใช้งาน
import { AuthService } from './auth.service';

@Injectable()
export class AuthGuardService {

  // inject AuthService และ Router 
  constructor(
    private authService: AuthService, 
    private router: Router) {}
  
  // กำนหนด guard ในส่วนของการใช้งานกับ  canActivate
  canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean {
    console.log('canActivate run');
    let url: string = state.url; // เก็บ url ที่พยายามจะเข้าใช้งาน
    // จะผ่านเข้าใช้งานได้เมื่อ คืนค่าเป็น true โดยเข้าไปเช็คค่าจากคำสั่ง checkLogin()
    return this.checkLogin(url); // คืนค่าการตรวจสอบสถานะการล็อกอิน
  }

  // กำนหนด guard ในส่วนของการใช้งานกับ  canActivateChild ส่วนนี้จะใช้กับ path ของ route ย่อย
  // ถ้าเข้าผ่าน route path ย่อย guard จะเข้ามาเช็คในส่วนนี้ก่อน กลับไปเช็คในส่วนของ canActivate()
  canActivateChild(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean {
    console.log('canActivateChild run');
    // จะเข้าใช้งานได้เมื่อ คืนค่าเป็น true โดยจะใช้ค่าจากการเรียกใช้คำสั่ง canActivate()
    return this.canActivate(route, state);
  }

  // ฟังก์ชั่นเช็คสถานะการล็อกอิน รับค่า url ที่ผู้ใช้พยายามจะเข้าใช้งาน
  checkLogin(url: string): boolean {
    // ถ้าตรวจสอบค่าสถานะการล็อกอินแล้วเป็น true ก็ให้คืนค่า true กลับอกไป
    if (this.authService.isLoggedIn) { return true; }
    
    // แต่ถ้ายังไม่ได้ล็อกอิน ให้เก็บ url ที่พยายามจะเข้าใช้งาน สำหรับไว้ลิ้งค์เปลี่ยนหน้า
    this.authService.redirectUrl = url; // redirectUrl เป็นตัวแปรที่อยู่ใน authService

    // ลิ้งค์ไปยังหน้าล็อกอิน เพื่อล็อกอินเข้าใช้งานก่อน
    this.router.navigate(['/login']);
    return false; // คืนค่า false กรณียังไม่ได้ล็อกอิน
  }    

}

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

import { LoginComponent } from './login.component';
import { AuthService } from '../auth.service';

// กำหนด route path ให้กับ login component
const loginRoutes: Routes = [
  {
    path:'login',
    component:LoginComponent
  }
];

@NgModule({
  imports: [RouterModule.forChild(loginRoutes)],
  exports: [RouterModule],
  providers:[ // กำนหด providers
    AuthService // เนื่งอจากเราจะมีการใช้งาน AuthService 
  ]
})
export class LoginRoutingModule { }

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';

import { LoginRoutingModule } from './login-routing.module';
import { LoginComponent } from './login.component';

@NgModule({
  imports: [
    CommonModule,
    LoginRoutingModule
  ],
  declarations: [LoginComponent]
})
export class LoginModule { }

<p>login works!</p>
<div>{{ loginMessage }}</div>
<form >
  <div style="width:50%;">
    <div>
      <label>Username</label>
    </div>
    <div>
      <input type="text" class="form-control" name="username" value="">
    </div>
    <div>
        <label>Password</label>
      </div>
      <div>
        <input type="password" class="form-control" name="password" value="">
      </div>  
      <br>
      <p>
        <button class="btn btn-sm btn-success" (click)="login()" type="button">Login</button>  
        <button class="btn btn-sm btn-danger" (click)="cancel()" type="button">Cancel</button>
      </p>  
  </div>
</form>

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';

import { AdminRoutingModule } from './admin-routing.module';
import { AdminComponent } from './admin.component';
import { AdminCenterComponent } from './admin-center.component';
import { ManageUsersComponent } from './manage-users.component';
import { ManageProductsComponent } from './manage-products.component';

@NgModule({
  imports: [
    CommonModule,
    AdminRoutingModule
  ],
  declarations: [
    AdminComponent, 
    AdminCenterComponent, 
    ManageUsersComponent, 
    ManageProductsComponent
  ]
})
export class AdminModule { }

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

import { AdminComponent } from './admin.component';
import { AdminCenterComponent } from './admin-center.component';
import { ManageUsersComponent } from './manage-users.component';
import { ManageProductsComponent } from './manage-products.component';

// import AuthGuardService ที่เราสร้างไว้เข้ามาใช้งาน
import { AuthGuardService } from '../auth-guard.service';

const adminRoutes: Routes = [
  {
    path:'admin',
    component:AdminComponent,
    // กำหนด guard service ให้กับ canActivate ที่ root ของ module ย่อย
    canActivate: [AuthGuardService], 
    children:[
      {
        path:'',
        component:AdminCenterComponent,
         // กำหนด guard service ให้กับ canActivateChild ให้กับ child ของ module ย่อย 
        canActivateChild: [AuthGuardService],
        children:[
          {
            path:'users',
            component:ManageUsersComponent
          },
          {
            path:'products',
            component:ManageProductsComponent
          }
        ]
      }
    ]
  }
];

@NgModule({
  imports: [RouterModule.forChild(adminRoutes)],
  exports: [RouterModule],
  providers:[
    AuthGuardService // ใช้งาน guard service ที่เราสร้างไว้
  ]
})
export class AdminRoutingModule { }

<nav class="navbar navbar-inverse navbar-fixed-top">
    <div class="container">
      <div class="navbar-header">
        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" 
              data-target="#navbar" aria-expanded="false" aria-controls="navbar">
          <span class="sr-only">Toggle navigation</span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
        <a class="navbar-brand" routerLink="/home" routerLinkActive="active">Home</a>
        <a class="navbar-brand" routerLink="/users" routerLinkActive="active">User</a>
        <a class="navbar-brand" routerLink="/products" routerLinkActive="active">Product</a>      
        <a class="navbar-brand" [routerLink]="[{ outlets: { popup: ['contact'] } }]" 
              routerLinkActive="active">Contact Us</a>   
        <a class="navbar-brand" routerLink="/admin" routerLinkActive="active">Admin</a>           
      </div> 
    </div>
  </nav>
  
  <div class="container">
    <br>
    <br>
    <h1>{{title}}</h1>
    <router-outlet></router-outlet>
    <router-outlet name="popup"></router-outlet>
  
  </div><!-- /.container -->

<p> admin works! </p>
<router-outlet></router-outlet>

<p> admin-center works! </p>
<button [routerLink]="['/admin']" 
  routerLinkActive="btn-info" [routerLinkActiveOptions]="{ exact: true }" 
  class="btn btn-sm btn-default" >Home</button>
<button [routerLink]="['/admin/users']" 
  routerLinkActive="btn-info" 
  class="btn btn-sm btn-default" >Manage User</button>
<button [routerLink]="['/admin/products']" 
  routerLinkActive="btn-info" 
  class="btn btn-sm btn-default" >Manage Product</button>
<button class="btn btn-sm btn-danger" (click)="logout()" 
  type="button">Log Out</button>
<router-outlet></router-outlet>

 [routerLinkActiveOptions]="{ exact: true }" 

import { Component, OnInit } from '@angular/core';
import { Router, ActivatedRoute, ParamMap } from '@angular/router';

import { AuthService } from '../auth.service';

@Component({
  //selector: 'app-admin-center',
  templateUrl: './admin-center.component.html',
  styleUrls: ['./admin-center.component.css']
})
export class AdminCenterComponent implements OnInit {

  constructor(
    private authService:AuthService,
    private router:Router) { }

  // คำสั่ง สำหรับเรียกให้ AuthService ทำคำสั่งล็อกเอาท์อีกที
  logout() {
    this.authService.logout();
    this.router.navigate(['/login']); // หลังจากล็อกอาท์ให้ไปที่หน้าล็อกอิน
  }

  ngOnInit() {
  }

}