Route တွေသတ်မှတ်တဲ့အခါ ကိုယ်သွားချင်တဲ့ route ကို URL ရေးပြီး သွားလို့ရပါတယ်။ ဒါပေမဲ့ တချို့ route တွေကို user အားလုံး ပေးမသုံးချင်တဲ့အခါ Route Guards တွေနဲ့ ကာကွယ်ထားလို့ ရပါတယ်။
canActivate
Route တစ်ခုကို မရောက်ခင်မှာ ဝင်ခွင့်ရမရ ကြိုစစ်ဖို့အတွက် သုံးပါတယ်။
ပထမဆုံး AuthGuardService ဆိုတဲ့ service ကို cli နဲ့ generate လုပ်လိုက်ပါ။
ပြီးရင်တော့အောက်ပါ code တွေရေးပါ။
export class AuthGuardService implements CanActivate {
constructor() {} canActivate(
route: ActivatedRouteSnapshot,
state: RouterStateSnapshot
): Observable<boolean> | Promise<boolean> | boolean {
}
}
CanActivate ကို implement လုပ်ပြီး canActivate() method ကို override လုပ်ပေးရပါတယ်။ ActivatedRouteSnapshot နဲ့ RouterStateSnapshot ကို param အနေနဲ့လက်ခံရရှိပါတယ်။ ဒီ param တွေကို Angular က data လာထည့်ပေးမှာ ဖြစ်ပါတယ်။ Return အနေနဲ့ သုံးမျိုးရှိနိုင်တာကြောင့် သုံးခုလုံးရေးထားတာပါ။
ဒီ method ထဲမှာ route ကို access လုပ်ခွင့်ပေးမပေး authenticate လုပ်ရမှာဖြစ်ပါတယ်။ အခုကတော့ fake auth service တစ်ခုနဲ့ပဲ စမ်းကြပါမယ်။
AuthService ကိုတည်ဆောက်လိုက်ပါ။
အထဲမှာတော့အောက်ပါ code တွေရေးပါ။
export class AuthService {
loggedIn = false;constructor() {}isAuthenticated() {
return new Promise((resolve, reject) => {
setTimeout(() => {
resolve(this.loggedIn);
}, 800);
});
}login() {
this.loggedIn = true;
}logout() {
this.loggedIn = false;
}
}
Authentication အတွက် fake service တွေရေးလိုက်တာ ဖြစ်ပါတယ်။
ပြီးရင်တော့ AuthGuardService ကိုပြန်ဖွင့်ပြီးအောက်ပါအတိုင်းရေးပါ။
export class AuthGuardService implements CanActivate {
constructor(
private authService: AuthService,
private router: Router) {}canActivate(...): ...{
return this.authService.isAuthenticated()
.then((authenticated) => {
if (authenticated) {
return true;
} else {
this.router.navigate(['/']);
return false;
}
});
}
}
isAuthenticated() ကရလာတဲ့ တန်ဖိုးပေါ်မူတည်ပြီး ဝင်ခွင့်ရမရ စစ်ထားတာပါ။ false ရခဲ့ရင်တော့ root route ကို navigate လုပ်ပေးလိုက်တာ တွေ့ရမှာဖြစ်ပါတယ်။
ခေါ်သုံးဖို့အတွက် AppRoutingModule မှာအခုလိုရေးပါ။
const appRoutes: Routes = [
...
{
path: 'servers',
component: ServersComponent,
canActivate: [AuthGuardService],
children: [...]
},
...
];servers route မှာ canActivate အကူအညီနဲ့ route guard လုပ်ဖို့ထည့်ထားတာ ဖြစ်ပါတယ်။ Array လက်ခံတာဖြစ်လို့ တစ်ခုထက်ပိုပြီး စစ်လို့လည်းရပါတယ်။
အားလုံးပြီးရင်တော့ servers tab ကိုနှိပ်ရင် 800 milisec အကြာမှာ home tab ကို navigate လုပ်သွားတာ တွေ့ရမှာဖြစ်ပါတယ်။
ဒီနည်းနဲ့ access မလုပ်စေချင်တဲ့ route တွေကို ကာကွယ်လို့ရမှာဖြစ်ပါတယ်။
canActivateChild
route ရဲ့ child route တွေကို guard လုပ်ချင်တဲ့အခါ အသုံးပြုနိုင်ပါတယ်။
AuthGuardService မှာ method အသစ်တစ်ခုကို အောက်ပါအတိုင်းရေးပါ။
export class AuthGuardService implements CanActivate, CanActivateChild {
...canActivateChild(
route: ActivatedRouteSnapshot,
state: RouterStateSnapshot
): Observable<boolean> | Promise<boolean> | boolean {
return this.canActivate(route, state);
}
CanActivateChild ကို implement လုပ်ပြီး canActivateChild() ကို override လုပ်ပေးရပါတယ်။ canActivate() နဲ့အတူတူပဲဖြစ်တာကြောင့် method ပြန်ခေါ်ပေးလိုက်တာတွေ့ရမှာပါ။
ပြီးရင်တော့ AppRoutingModule ရဲ့ canActivate နေရာမှာ အခုလိုပြင်လိုက်ပါ။
const appRoutes: Routes = [
...
{
path: 'servers',
component: ServersComponent,
canActivateChild: [AuthGuardService],
children: [...]
},
...
];ပြန်စမ်းကြည့်ရင်တော့ server တစ်ခုချင်းကို နှိပ်တော့မှ home tab ကို navigate လုပ်သွားတာ တွေ့ရမှာဖြစ်ပါတယ်။
ဒီနည်းနဲ့ route တစ်ခုလုံးကို guard လုပ်မလား child route တွေပဲ guard လုပ်မလားဆိုတာ ဆုံးဖြတ်ပြီး ရေးသားရမှာ ဖြစ်ပါတယ်။
Upgrading our app
အခုဆိုရင် Route Guard တွေအလုပ်လုပ်နေပြီဖြစ်ပေမဲ့ login လုပ်လို့မရသေးတာကြောင့် home tab ကိုပဲအမြဲ navigate လုပ်နေတာ တွေ့ရမှာပါ။
ဒါကြောင့် HomeComponent မှာ button နှစ်ခုထပ်ထည့်ပါမယ်။
HTML
<button class="btn btn-primary" (click)="onLogin()">Login</button>
<button class="btn btn-danger" (click)="onLogout()">Logout</button>TypeScript
constructor(
private authService: AuthService
) {}onLogin() {
this.authService.login();
}onLogout() {
this.authService.logout();
}
ပြန်စမ်းရင်တော့ login လုပ်လိုက်ရင် server တွေကို နှိပ်လို့ရသွားမှာ ဖြစ်ပါတယ်။
ဒီလောက်ဆိုရင် route guard နဲ့ authenticate လုပ်လို့ရပြီပဲဖြစ်ပါတယ်။
Previous: Routing Deep Dive
Next: More in Routing
