Angular2 Guards

Angular2 Guards

canActivate

사용자가 특정 페이지에 링크를 클릭하여 접근할 수 있게 하는 것이 route 기능인데, 여기에 어떤 제한을 둘 수 있다. 이것이 route guards이다.

• route와 app.module.ts에 아래와 같이 추가한다.

export const routes: Routes = [ { path: '', redirectTo: 'login', pathMatch: 'full' }, { path: 'login', component: LoginComponent }, { path: 'list', component: ListComponent, canActivate: [AuthGuard] } ] 
@NgModule({ providers: [ UcloudService, AuthGuard ] })

• AuthGuard를 추가한다.

import { Injectable } from '@angular/core'; import { Observable } from "rxjs/Rx"; import { CanActivate, Router, ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router'; 
import { UcloudService } from './ucloud.service'; 

@Injectable() 
export class AuthGuard implements CanActivate {
constructor(
 private ucloud: UcloudService, 
 private router: Router
) { } 

canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean { 
 if (this.ucloud.isValid()) { 
  return true; 
 } else {
  this.router.navigate(['/login']);
  return false; 
 } 
} 
}

위와 같이 추가하면, 로그인이 성공해야 다른 페이지로 넘어갈 수 있다.