มือใหม่หัดใช้ Angular ตอนที่ 6: การใช้ router อย่างง่ายๆ

ตอนก่อนหน้า – มือใหม่หัดใช้ Angular ตอนที่ 5: การสร้าง Service และการเก็บข้อมูลของ user ลงใน localstorage

หลังจากที่เราลองเขียนหน้าเว็บที่ใช้ในการ register และ login กันมา 2-3 ตอน แต่ว่าหน้าตาของเว็บมันยังดูไม่ค่อยสวยเท่าไหร่เลยแฮะ วันนี้เราเลยจะทำการแยกหน้า register กับหน้า login โดยการใช้ router กัน

router คืออะไร?

ถ้าเทียบกันง่ายๆเลยก็คือ เป็นเสมือนตัวช่วยให้เราสามารถเปลี่ยนไปยังหน้าอื่นๆโดยที่ไม่ต้องโหลดหน้าเว็บทั้งหมดใหม่ เพราะฉะนั้นตัว browser ก็จะไม่ต้องหมุนติ้วๆเวลาเรากดเปลี่ยนหน้า ซึ่งเป็นหัวใจของการทำ single page web application นั่นเอง

โดยการสร้าง router เริ่มจากการเข้าไปแก้ไขไฟล์ app.module.ts

import { Routes, RouterModule } from ‘@angular/router’;

const appRoutes: Routes = [];

@NgModule({
…
imports: [
…
RouterModule.forRoot(appRoutes)
],

โดยตัวแปร appRoutes จะเป็นตัวแปรที่ใช้กำหนด path ต่างๆ เช่น อยากให้เมื่อเราใส่ url เป็น localhost:4200/register แล้วให้แสดงหน้า register หรือแม้กระทั่งตั้งค่า default path ให้กับเว็บของเราก็ย่อมได้

ในการสร้าง route มีค่าที่สำคัญๆอยู่ 2 ค่า

• path – ระบุ path ที่ต้องการ
• component – ระบุ component ที่จะใช้แสดงเมื่อ user ใส่ path ด้านบน

ตัวอย่างเช่น

const appRoutes: Routes = [
    {path: 'register', component: RegisterComponent},
    {path: 'login', component: LoginComponent},
    {path: '', component: RegisterComponent} // default หน้าแรก
  ];

อ๊ะๆๆ เรายังไม่จบเท่านี้ หลายคนอาจจะสงสัยว่า แล้วอย่างนี้ Angular จะรู้ได้ยังไงว่าจะต้องแสดงตัว component ที่เราต้องการตรงไหน เพราะงั้นเราเลยต้องไปแก้ไฟล์ app.component.html ซักหน่อย

จากของเดิม เราใส่เป็นแบบนี้

<app-register></app-register>
<hr>
<app-login></app-login>

กลายเป็น

<router-outlet></router-outlet>

เพียงเท่านี้ เมื่อ user ใส่ path มาเป็น localhost:4200/register ตัวเว็บของเราก็จะแสดง RegisterComponent ให้ user เห็นกันแล้วหล่ะ

นอกจากนี้ เรายังสามารถเพิ่มลิงก์เพื่อลิงก์ไปยัง path ที่เราต้องการด้วย โดยการใช้

<a router-link=””></a>

โดยค่าที่อยู่ใน router-link ก็คือ relative path ที่เราต้องการ เช่น การเพิ่มลิงก์ในหน้า login ให้สามารถเรียกกลับไปยังหน้า register ได้ สามารถเขียนได้ง่ายๆแบบนี้

<p style=”text-align: center”><a routerLink=”/register”>Register</a></p>

เมื่อ user กดคำว่า Register ตัว url ของเว็บก็จะกลายเป็น localhost:4200/register และแสดงผลหน้า register ให้เราทันที

แต่เอ… จากบทความครั้งที่แล้วที่ทิ้งท้ายไว้ว่า เราจะใช้ localstorage กับ router ซึ่งก็คือ การเช็คว่า user นี้เคย login หรือยัง โดยเช็คข้อมูลจาก localstorage โดยถ้า user นี้เคย login แล้ว ก็ให้เด้งไปหน้าหลักเลย

ก่อนอื่น เราทำการสร้าง home component ขึ้นมาก่อน (เปรียบเสมือนหน้าหลักของเว็บ) โดยใช้คำสั่ง

ng g c home

(จะปรับแต่งหน้าตาของหน้านี้ก็ได้นะ ไม่ว่ากัน)

หลังจากนั้นเพิ่ม /home เข้าไปในตัวแปร appRoutes ในไฟล์ app.module.ts

const appRoutes: Routes = [
    {path: 'register', component: RegisterComponent},
    {path: 'login', component: LoginComponent},
    {path: 'home', component: HomeComponent},
    {path: '', component: RegisterComponent}
  ];

ได้เวลากลับไปที่ไฟล์ auth.service.ts ของเรา เพื่อแก้ไขให้เมื่อ register หรือ login เรียบร้อยแล้ว ให้เด้งไปที่หน้า home ทันที

เริ่มจากการ import router

import {Router} from ‘@angular/router’;

เพิ่มตัวแปร router ใน constructor

constructor(private firebaseAuth: AngularFireAuth, private router: Router) {…}

และในฟังก์ชัน signup และ login เมื่อบันทึกค่าของ user ลง localstorage แล้ว ให้ใช้คำสั่งต่อไปนี้เพื่อ navigate user ไปยังหน้า home

authC.router.navigate([‘/home’]);

ถ้าหากทำตามนี้แล้ว เมื่อ user ทำการ register หรือ login สำเร็จ ก็จะเข้าสู่หน้า home ทันที

แต่โดยทั่วไปแล้ว การที่ให้ user มาคอย login บ่อยๆทุกครั้งเวลาเข้าเว็บก็ไม่ค่อยดีใช่ไหมหล่ะ? เพราะงั้น เราจะทำการเช็คว่ามีข้อมูลของ user ใน localstorage หรือเปล่า ถ้ามีอยู่แล้วก็ข้ามขั้นตอนการ login ได้เลย

ในเมื่อเราตั้งค่าให้ RegisterComponent เป็นหน้าแรกของเว็บเรา เราจึงเข้าไปแก้ที่ register.component.ts โดยทำคล้ายๆกับตอนสร้าง router ใน service เลย

• import router

import { Router } from ‘@angular/router’;

• สร้างตัวแปร router ในฟังก์ชัน constructor

constructor(…, private router: Router) {…}

• เพิ่มโค้ดในฟังก์ชัน constructor เล็กน้อย

constructor(..., private router: Router) {
  if ('uid' in localStorage) {
    this.router.navigate(['/home']);
    return;
  }
}

เพียงเท่านี้ เมื่อ user เข้ามาในหน้าแรกของเว็บ หาก user เคย login เข้ามาแล้ว ก็จะเด้งไปยังหน้า home ในทันที! ทำก็ง่าย ใช้ก็ง่าย

ยังไงก็ฝากติดตามบทความต่อๆไปกันด้วยนะครับ ^ ^

---

ปล. แถมฟังก์ชัน logout ไว้นิดนึง สั้นๆ ง่ายๆ โดยเพิ่มในไฟล์ auth.service.ts และสามารถเรียกใช้ได้เหมือนการเรียกฟังก์ชัน signup และ login เลยนะ

logout() {
  this.firebaseAuth
    .auth
    .signOut();
  location.pathname = '/login';
}