我正在迈出使用 Angular 2 和 Angular 的第一步,我想知道如何设置登陆页面。
我的目标是每次用户在本地存储或 cookie 中没有 token 时都显示一个登录页面。
我的 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 如果我理解正确的话也是组件。现在我想要一个无法访问导航栏的单独页面。这是用户在未登录时将始终登陆的页面。
如果有人可以帮助我开始或至少为我指出一个好的方向,那就太棒了,也许给我一个好的 Angular 2 教程。
这是我的应用程序基于 https://github.com/mgechev/angular2-seed 的样板
最佳答案
如果 token 存在,您可以覆盖路由器导出并检查激活情况。像这样:
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
这可以扩展到能够使用 Angular 色和其他访问控制。
关于javascript - Angular 2 着陆页,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36980868/