Implement Authentication Service in Angular 2 Routing

Pada saat mendevelop web, pasti kita mempunyai private menu dan public menu. Pada private menu mekanisme nya kita di cek terlebih dahulu apakah kita diperbolehkan untuk mengakses menu itu atau tidak, jika boleh maka menu itu akan bisa kita akses, namun jika tidak maka akan di redirect ke sebuah url.

Tentu ini merupakan hal yang penting, namun bagiamana cara kita mengimplement hal tersebut pada Angular 2?

Pertama tama kita buat terlebih dahulu simple service yang diberi nama class AuthService. Service ini isinya mengecek apakah kita mempunyai access_token atau tidak. Sebelum nya kita mengimplement SessionStorageService dari ng2-webstorage.

Kemudian buat sebuah service baru yang diberi nama class AuthGuard yang mengimplement class @angular/router. Di dalam nya kita buat sebuah method yang nantinya akan dipanggil dari router component kita. Jangan lupa kita import AuthService yang sudah kita define sebelum nya,karena disini kita akan memanggil service dari method itu.

Pada routing, kita cukup menambahkan canActivate:[AuthGuard].

Hasilnya, maka jika kita mengakses path tertentu maka secara langsung router memanggil service yang di dalam nya dia mengecek apakah kita punya token atau tidak.

Semoga membantu !