[ตอนที่ 7] Social App Workshop ด้วย ASP.NET Core 3 กับ Angular 9 การใช้ Routing ใน Angular

Line
Facebook
Twitter
Google

สารบัญเนื้อหา

  1. สร้าง Component ตามเมนูที่ต้องใช้
  2. สร้าง Routes
  3. กำหนด Link ในเมนู ให้ตรงกับ Routes
  4. กำหนด Route เมื่อ Login และ Logout
  5. ป้องกันการเข้าถึง Url ด้วย Route Guard
  6. ป้องกันหลาย Url ด้วย Single Guard

1. สร้าง Component ตามเมนูที่ต้องใช้

สร้าง Components ที่ต้องใช้ ดังนี้

  • MemberList
  • Lists
  • Messages

2. สร้าง Routes

สร้างไฟล์ routes.ts ภายใต้ app

import { Routes } from '@angular/router';
import { HomeComponent } from './home/home.component';
import { ListsComponent } from './lists/lists.component';
import { MessagesComponent } from './messages/messages.component';
import { MemberlistComponent } from './memberlist/memberlist.component';

export const appRoutes: Routes = [
    { path: 'home', component: HomeComponent },
    { path: 'members', component: MemberlistComponent },
    { path: 'messages', component: MessagesComponent },
    { path: 'lists', component: ListsComponent },
    { path: '**', redirectTo: 'home', pathMatch: 'full' },
];

เพิ่ม RouterModule ใน app.module.ts

3. กำหนด Link ในเมนู ให้ตรงกับ Routes

กำหนด Link ใน nav.component.html

<nav class="navbar navbar-expand-md navbar-dark bg-dark">
  <div class="container">
    <a class="navbar-brand" href="#">Social App</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault"
      aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>

    <div class="collapse navbar-collapse" id="navbarsExampleDefault">
      <ul class="navbar-nav mr-auto">
        <li class="nav-item" routerLinkActive="active">
          <a class="nav-link" [routerLink]="['/home']">Home</a>
        </li>
        <li class="nav-item" routerLinkActive="active">
          <a class="nav-link" [routerLink]="['/members']">Members</a>
        </li>
        <li class="nav-item" routerLinkActive="active">
          <a class="nav-link" [routerLink]="['/lists']">Lists</a>
        </li>
        <li class="nav-item" routerLinkActive="active">
          <a class="nav-link" [routerLink]="['/messages']">Messages</a>
        </li>
      </ul>

      <div *ngIf="loggedIn()" class="dropdown" dropdown>
        <a class="dropdown-toggle text-light" dropdownToggle>
          Welcome {{authService.decodeToken?.unique_name | titlecase}}
        </a>

        <div class="dropdown-menu" *dropdownMenu>
          <a href="#" class="dropdown-item"><i class="fa fa-user"></i> Edit Profile</a>
          <div class="dropdown-divider"></div>
          <a (click)="logout()" class="dropdown-item"><i class="fa fa-sign-out"></i> Logout</a>
        </div>
      </div>

    </div>
  </div>
</nav>

กำหนด Router Outlet ใน app.component.html

ย้าย login ไปไว้ใน home.component.html

เพิ่มการแสดงเมนู เมื่อ login เท่านั้น

แต่ในกรณีนี้ ถ้ารู้ url ก็ยังคงสามารถเข้าสู่ component นั้น ๆ ได้

4. กำหนด Route เมื่อ Login และ Logout

กำหนดให้เมื่อ Logout แล้วไปที่ Home ที่ login.service.ts

กำหนดให้เมื่อ Login สำเร็จให้ไปที่ Members List ที่ login.component.ts

5. ป้องกันการเข้าถึง Url ด้วย Route Guard

สร้างโฟลเดอร์ _guards ภายใต้ app

ใช้ Terminal เข้าไปที่ src/app/_guards แล้วรันคำสั่ง ดังนี้

ng g guard auth --skipTests

เลือก canActivate

เปิดไฟล์ auth.guard.ts แล้วแก้ไขโค้ด ตามนี้

import { Injectable } from '@angular/core';
import { CanActivate, Router } from '@angular/router';
import { AuthService } from '../_services/auth.service';
import { AlertifyService } from '../_services/alertify.service';

@Injectable({
  providedIn: 'root'
})
export class AuthGuard implements CanActivate {
  constructor(
    private authService: AuthService,
    private router: Router,
    private alertify: AlertifyService
  ){}

  canActivate(): boolean {
    if (this.authService.loggedIn()) {
      return true;
    }

    this.alertify.error('You shall not pass!');
    this.router.navigate(['/home']);
    return false;
  }

}

กำหนดให้ Url ที่ต้อง Login ก่อน โดยใส่คำสั่ง canActivate: [AuthGuard]

6. ป้องกันหลาย Url ด้วย Single Guard

เพิ่มคำสั่งป้องกันใน routes.ts

import { Routes } from '@angular/router';
import { HomeComponent } from './home/home.component';
import { ListsComponent } from './lists/lists.component';
import { MessagesComponent } from './messages/messages.component';
import { MemberlistComponent } from './memberlist/memberlist.component';
import { AuthGuard } from './_guards/auth.guard';

export const appRoutes: Routes = [
    { path: 'home', component: HomeComponent },
    {
        path: '',
        runGuardsAndResolvers: 'always',
        canActivate: [AuthGuard],
        children: [
            { path: 'members', component: MemberlistComponent },
            { path: 'messages', component: MessagesComponent },
            { path: 'lists', component: ListsComponent }
        ]
    },
    { path: '**', redirectTo: 'home', pathMatch: 'full' },
];

โปรดติดตามตอนต่อไป…

Line
Facebook
Twitter
Google
[ตอนที่ 16] Social App Workshop ด้วย ASP.NET Core 3 กับ Angular 9 การทำ Sorting
[ตอนที่ 15] Social App Workshop ด้วย ASP.NET Core 3 กับ Angular 9 การทำ Filtering
[ตอนที่ 14] Social App Workshop ด้วย ASP.NET Core 3 กับ Angular 9 การใช้งาน Paging
No Preview
[ตอนที่ 13] Social App Workshop ด้วย ASP.NET Core 3 กับ Angular 9 การกำหนดรูปแบบการแสดงผลวัน-เวลา
เตรียม Atom สำหรับ React Native #3
เตรียม Visual Studio Code สำหรับ React Native #2
การติดตั้ง React Native บน macOs #1
การกำหนดค่า TF_MIN_GPU_MULTIPROCESSOR_COUNT เพื่อให้ TensorFlow ใช้งาน GPU ทุกตัว
ติดตั้ง Ubuntu 17.04 ใช้งานร่วมกับ Windows 10
การติดตั้ง TensorFlow & Caffe บน Ubuntu 16.04