我正在采用Angular 2和角度的第一步,我想知道如何设置登陆页面.
我的目标是每次用户在本地存储或cookie中没有令牌时显示登录页面.
我的app.component.ts看起来像这样
import {Component} from 'angular2/core';
import {ROUTER_DIRECTIVES,RouteConfig} from 'angular2/router';
import {NavbarComponent} from './navbar.component';
import {LoaderComponent} from './loader.component';
import {NameListService} from '../shared/index';
import {HomeComponent} from '../+home/index';
import {AboutComponent} from '../+about/index';
@Component({
selector: 'g-app',viewProviders: [NameListService],templateUrl: 'app/components/app.component.html',directives: [ROUTER_DIRECTIVES,NavbarComponent,LoaderComponent]
})
@RouteConfig([
{
path: '/',name: 'Home',component: HomeComponent
},{
path: '/about',name: 'About',component: AboutComponent
}
])
export class AppComponent {
}
如果我理解正确,/ home和/ about也是组件.现在我想要一个无法访问导航栏的单独页面.如果用户未登录,则该用户将始终登陆.
如果有人可以帮助我开始或至少指向一个好的方向,那将是非常棒的,也许可以指向一个好的角度2教程.
这是我的应用程序基于https://github.com/mgechev/angular2-seed的样板
解决方法
如果令牌存在,您可以覆盖路由器插座并检查激活.像这样的东西：
import {Directive,Attribute,ElementRef,DynamicComponentLoader} from 'angular2/core';
import {Router,RouterOutlet,ComponentInstruction} from 'angular2/router';
@Directive({
selector: 'router-outlet'
})
export class LoggedInRouterOutlet extends RouterOutlet {
publicRoutes: any;
private parentRouter: Router;
constructor(_elementRef: ElementRef,_loader: DynamicComponentLoader,_parentRouter: Router,@Attribute('name') nameAttr: string) {
super(_elementRef,_loader,_parentRouter,nameAttr);
this.parentRouter = _parentRouter;
}
activate(instruction: ComponentInstruction) {
if (!hasToken()) {
this.parentRouter.navigateByUrl('/login');
}
return super.activate(instruction);
}
}
改编自：https://github.com/auth0-blog/angular2-authentication-sample/blob/master/src/app/LoggedInOutlet.ts
这可以扩展为能够使用角色和其他访问控制.
