최종 라우터와 함께 사용
새로운 라우터의 도입으로 경로를 보호하는 것이 더 쉬워졌습니다. 서비스 역할을하는 가드를 정의하고 경로에 추가해야합니다.
import { Injectable } from '@angular/core';
import { CanActivate } from '@angular/router';
import { UserService } from '../../auth';
@Injectable()
export class LoggedInGuard implements CanActivate {
constructor(user: UserService) {
this._user = user;
}
canActivate() {
return this._user.isLoggedIn();
}
}
이제를 경로에 전달 하고 모듈 LoggedInGuard의 providers배열 에도 추가합니다 .
import { LoginComponent } from './components/login.component';
import { HomeComponent } from './components/home.component';
import { LoggedInGuard } from './guards/loggedin.guard';
const routes = [
{ path: '', component: HomeComponent, canActivate: [LoggedInGuard] },
{ path: 'login', component: LoginComponent },
];
모듈 선언 :
@NgModule({
declarations: [AppComponent, HomeComponent, LoginComponent]
imports: [HttpModule, BrowserModule, RouterModule.forRoot(routes)],
providers: [UserService, LoggedInGuard],
bootstrap: [AppComponent]
})
class AppModule {}
최종 릴리스에서 작동하는 방법에 대한 자세한 블로그 게시물 : https://medium.com/@blacksonic86/angular-2-authentication-revisited-611bf7373bf9
더 이상 사용되지 않는 라우터와 함께 사용
보다 강력한 솔루션은 RouterOutlet사용자가 로그인했는지 확인하고 경로를 활성화 할 때 확장하는 것 입니다. 이렇게하면 모든 구성 요소에 지시문을 복사하여 붙여 넣을 필요가 없습니다. 게다가 하위 구성 요소를 기반으로 한 리디렉션은 오해의 소지가 있습니다.
@Directive({
selector: 'router-outlet'
})
export class LoggedInRouterOutlet extends RouterOutlet {
publicRoutes: Array;
private parentRouter: Router;
private userService: UserService;
constructor(
_elementRef: ElementRef, _loader: DynamicComponentLoader,
_parentRouter: Router, @Attribute('name') nameAttr: string,
userService: UserService
) {
super(_elementRef, _loader, _parentRouter, nameAttr);
this.parentRouter = _parentRouter;
this.userService = userService;
this.publicRoutes = [
'', 'login', 'signup'
];
}
activate(instruction: ComponentInstruction) {
if (this._canActivate(instruction.urlPath)) {
return super.activate(instruction);
}
this.parentRouter.navigate(['Login']);
}
_canActivate(url) {
return this.publicRoutes.indexOf(url) !== -1 || this.userService.isLoggedIn()
}
}
는 UserService비즈니스 로직은 사용자 로그인 여부 상주하는 곳을 의미합니다. 생성자에서 DI로 쉽게 추가 할 수 있습니다.
사용자가 웹 사이트의 새 URL로 이동하면 activate 메소드가 현재 명령으로 호출됩니다. 여기에서 URL을 가져와 허용 여부를 결정할 수 있습니다. 로그인 페이지로 리디렉션하지 않는 경우.
작동하도록 마지막으로 남은 것은 기본 구성 요소 대신 기본 구성 요소에 전달하는 것입니다.
@Component({
selector: 'app',
directives: [LoggedInRouterOutlet],
template: template
})
@RouteConfig(...)
export class AppComponent { }
이 솔루션은 @CanActive수명주기 데코레이터 와 함께 사용할 수 없습니다. 전달 된 함수가 false로 확인되면의 activate 메서드 RouterOutlet가 호출되지 않기 때문입니다.
또한 그것에 대한 자세한 블로그 게시물을 작성했습니다 : https://medium.com/@blacksonic86/authentication-in-angular-2-958052c64492