我使用angular2 v2.1.2,我想在加载页面之前检查路由器
登录后,如果用户输入网址/login
,我的应用将导航至HomePage
如果我不login
,我无法登录而无法访问任何页面。
我的问题是:如果我在一个浏览器上打开两个标签:
Tab one
:登录,然后转到帐户页面
Tab two
:登录,然后注销。然后返回tab one
并重新加载page =>发生错误TypeError: Cannot read property '_outlets' of undefined
我该如何解决呢?
我有Routes
RouterModule.forRoot([
{path: "login", component: LoginComponent},
{path: "home", component: HomeComponent},
{path: "accounts", component: AccountsComponent},
{path: '', redirectTo: '/login', pathMatch: 'full'},
{path: '**', component: HomeComponent}
]);
LoggedInRouterOutlet指令
import { Directive, ComponentRef, ResolvedReflectiveProvider, Injectable, ComponentFactoryResolver, Injector } from '@angular/core';
import { Router, RouterOutlet, RouterOutletMap, ActivatedRoute } from '@angular/router';
@Injectable()
@Directive({
selector: 'router-outlet'
})
export class LoggedInRouterOutlet extends RouterOutlet {
activate(activatedRoute: ActivatedRoute, loadedResolver: ComponentFactoryResolver, loadedInjector: Injector, providers: ResolvedReflectiveProvider[], outletMap: RouterOutletMap) {
let isLogin = Storage.checkLogin(),
loginComponents = ["login", "chooseAccount"],
isPublic = activatedRoute.data.value.isPublic;
if (isLogin) {
if (_.includes(loginComponents, path)) {
//navigate to HomePage if enter /login
location.href = '#/home';
} else {
return super.activate(activatedRoute, loadedResolver, loadedInjector, providers, outletMap);
}
} else {
if (!_.includes(loginComponents, path)) {
//navigate to LoginPage if enter /home, ...
location.href = '#/login';
} else {
return super.activate(activatedRoute, loadedResolver, loadedInjector, providers, outletMap);
}
}
}
}