Question

我正在采用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

的样板文件

Answer 1

如果存在令牌，您可以覆盖路由器插座并检查激活情况。像这样：

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

这可以扩展为能够使用角色和其他访问控制。

Answer 2

当令牌不可用时，您可以在加载时重定向到特定路由。

export class AppComponent {
  constructor(private router:Router) {
    if(!hasToken()) {
      router.navigate(['/LoginForm']);
    }
  }
}

或者，如果允许用户导航到该路线，您可以创建一个自定义RouterOutlet来检查每条路线，如http://www.captaincodeman.com/2016/03/31/angular2-route-security/

中所述

Angular 2登陆页面

2 个答案: