lifelong learner — urip iku urup, currently working on accenture.

Angular 2 – Auth Guard authentikasi terhadap router

0
Degananda.com -
Authguard adalah metode untuk memproteksi routing dari kondisi tertentu.

Routing adalah sebuah kegiatan dalam menentukan endpoint dari suatu url dan isi dari endpoint tersebut. Sehingga pada angular, routing adalah menentukan endpoint dari sebuah komponen dan parameter ataupun data yang diperlukan oleh komponen tersebut. Untuk membahas lebih lanjut mengenai angular routing anda dapat membaca disini : https://degananda.com/2017/05/24/tutorial-angular-2-chapter-3-input-output-routing-ng-style/

Pada ulasan kali ini kita akan membahas mengenai auth guard. Secara harfiah pengertian auth guard adalah tembok autentifikasi. Arti tembok disini bermakna sebagai proteksi. Jika dikaitkan dengan routing maka auth guard ini akan melindungi setiap route terhadap sebuah endpoint tertentu dari suatu kondisi tertentu, salah satu contoh kondisinnya adalah kondisi terautentifikasi. Contohnya seperti ini :

  • localhost:4200 , endpoint ini tidak membutuhkan authentifikasi / session khusus karena merupakan halaman landing
  • localhost:4200/login, endpoint ini tidak membutuhkan suatu authentifikasi / session khusus karena merupakan halaman login namun, jika seorang user yang memiliki autentifikasi / session atau bahasa lainnya adalah user tersebut telah login maka user itu tidak dapat mengkases localhost:4200/login dan akan diredirect ke halaman lainnya.
  • localhost:4200/note , endpoint ini membutuhkan autentifikasi / session sehingga hanya user yang telah login yang dapat mengakses halaman tersebut.

Namun tidak hanya dapat melakukan proteksi tentang autentifikasi, terdapat beberapa fungsi guard yang disediakan oleh angular pada package @angular/route. Kelima guard ini digunakan untuk memproteksi router dengan tujuan yang berbeda-beda. Kelima guard tersebut yaitu :

  1. CanActivate
    Guard yang berfungsi untuk mengenable atau disable sebuah route dengan kondisi tertentu. Biasannya CanActivate inilah yang digunakan untuk memproteksi router dari user yang tidak terautentikasi (belum login).
  2. CanActivatedChild
    Guard yang berfungsi untuk mengenble atau disable sebuah child route
  3. CanDeactivate
    Untuk menentukan apakah route dapat di disable / deaktivasi.
  4. CanLoad
    Menentukan apakah router dapat dilakukan lazyload. Lazy load adalah sebuah mekanisme untuk melakukan load terhadap sebuah module atau komponen ketika telah memenuhi kondisi tertentu. Dengan kata lain lazyload dapat melakukan load pada komponen jika komponen tersebut dibutuhkan. Jika komponen tidak dibutuhkan maka tidak dilakukan lazy loading.

Dari ke-empat fungsi guard tersebut pada ulasan ini kita akan membahas mengenai fungsi canActivate yang dapat kita gunakan untuk memproteksi user yang tidak terautentikasi(belum login).

CanActivate

untuk mendefinisikan class router guard sama layaknya seperti kita membuat sebuah injectable services. Kemudian services tersebut kita lakukan dependecy injection pada router. Fungsi CanActivate melakukan return berupa boolean, promise<boolean> ataupun observable<boolean>. Sehingga memberikan kita kebebasan tipdata yang direturn dalam membuat web services untuk mengetahui apakah user sedang login atau tidak. Pada ulasan ini yang kami contohkan adalah menggunakan firebase auth yang return datannya berupa observable<boolean> serta angular-cli.

Langkah 1 – Membuat services

ng g services auth-guard

setelah melakukan eksekusi perintah diatas pada folder project angular maka secara otomatis akan mengenerate file bernama auth-guard.services.ts.

langkah 2 – Register services

service auth-guard yang baru saja kita buat harus diregistrasi pada app.module.ts dibagian metadata providers. jangan lupa melakukan import terlebih dahulu (auth-guard.services).

// service guard
import { AuthGuardService } from './auth-guard.service';

setelah import lakukan register ke metadata providers layaknya kita membuat shared services pada angular.

  providers: [
    AuthGuardService
  ],

langkah 3 – Konfigurasi router

Authguard yang telah teregistrasi harus kita masukan kedalam konfigurasi router. Kita dapat secara bebas menaruh authguard ini pada router terentu. Sehingga tidak semua routes memiliki authguard selain itu, kita juga dapat memiliki lebih dari satu authguard jika memang dibutuhkan.

    {
        path : 'business',
        component : ComBusinessComponent,
        canActivate : [AuthGuardService],
        data : {
            module : 'business'
        }
    }

langkah 4 – Coding services authguard

auth guard services yang telah kita buat masih belum berfungsi layaknya sebagai sebuah authguard karena memang belum kita lakukan coding. Ada tiga hal yang perlu dilakukan untuk membuat services tersebut menjadi authguard yang siap dimasukan dalam konfigurasi router yaitu :

  1. Services harus memiliki fungsi canActivate yang diambil dari package @angular/router.
  2. Fungsi canActivate haruslah melakukan return berupa observable<boolean>, promise<boolean> ataupun boolean biasa.
  3. OPSIONAL, Melakukan dependency injection terhadap services yang memiliki fungsi untuk melakukan check apakah user sedang login atau tidak. Meski hal ketiga ini opsional namun sangat direkomendasikan untuk memisahkan services auth guard dengan services yang berfungsi mengecek kondisi autentikasi user hal ini terkait dengan performa sistem. Karena service tersebut berfungsi sebagai shared services yang dapat digunakan di komponen / services lainnya.

dibawah ini adalah isi dari auth-guard.services.ts yang mengakomodasi tiga hal diatas.

import { Injectable } from '@angular/core';
import { CanActivate } from '@angular/router';
// import shared service serviceAuth yang berfungsi sebagai service 
// yang berfungsi untuk menunjukan apakah user telah login atau belum
import { ServiceAuthService } from './service-auth.service';
@Injectable()
export class AuthGuardService {

  constructor(
    private serviceAuthService : ServiceAuthService
  ) { }

  // implementasi fungsi canActivate dari package @angular/router
  canActivate(){
    return this.serviceAuthService.isLoggedIn();
  }

}

berikut adalah fungsi isLoggedIn() yang menggunakan firebase auth. Anda dapat menggunakan fungsi autentikasi sesuai dengan database/teknologi yang digunakan. Pada ulasan ini menggunakan firebase auth.

import { Injectable } from '@angular/core';
import { AngularFire, FirebaseAuthState } from 'angularfire2';
import { Subscription } from 'rxjs/Subscription';
import { Router } from '@angular/router';
import * as firebase from 'firebase';
import 'rxjs/add/operator/take';
import 'rxjs/add/operator/do';


@Injectable()
export class ServiceAuthService {

  constructor(
    private af : AngularFire,
    private router : Router
  ) {

  }

  isLoggedIn(){
     return this.af.auth
     .take(1)
     .map(authState => !!authState)
     .do(
       authStatus => {
          if(!authStatus){
            this.router.navigate(['/']);
          }
       }
     );
  }

}

Sedikit penjelasan dari kode diatas, firebase auth tersimpan pada instances firebase.auth() yang mereturn suatu observable. Kami menggunakan fungsi .take(1) agar setelah observable tersebut diolah/subscribe akan langsung di destroy untuk menjaga performa sistem. Karena canActivate hanya menerima observable dalam tipe boolean kita perlu melakukan mapping (.map) terhadap observable sehingga tipenya menjadi observable<boolean>. Kemudian digunakan fungsi .do untuk memproses authStatus (true/false) jika false berarti user belum login maka akan kita lemparkan ke halaman login. fungsi .take, .map, .do diambil dari package rxjs/operator. Anda tidak diperlu membuat fungsi isLoggedIn seperti diatas karena kami menggunakna firebase auth sehingga disesuaikan dengan sistem authentikasi project anda.

done~~

maka sekarang route yang diberikan konfigurasi canActivate hanya akan dapat diakses oleh user yang telah terautentikasi sesuai dengan fungsi yang didefinisikan pada isLoggedIn() , sampai disinilah ulasan ini semoga memberikan manfaat pada saat membuat project dalam menggunakan angular. Pada ulasan selanjutnya akan dibahas mengenai tiga fungsi lainnya dari AuthGuard.