最終ルーターでの使用
新しいルーターの導入により、ルートの保護が容易になりました。サービスとして機能するガードを定義し、ルートに追加する必要があります。
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を使用して簡単に追加できます。
ユーザーがWebサイトの新しいURLに移動すると、アクティブ化メソッドが現在の命令で呼び出されます。そこから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