Angular 2中的条件路由更改默认路由答案

【问题标题】：Conditional routing change default route in Angular 2Angular 2中的条件路由更改默认路由
【发布时间】：2016-04-21 14:06:23
【问题描述】：

我正在创建一个应用程序，当用户进入该页面时，他会转到默认路由，即“登录”页面。我想要的是基于一个条件（如果用户有一个本地存储变量 id，一个名为 isAuthenticaded() 的方法如果不是假则返回真）用户必须看到“投票”页面而不是“登录”页面。我认为有两种不同的方法来实现这一点：

1- 更改默认页面：如果方法返回 true，默认页面应该是“投票”，如果不是“登录”。

2- 重定向用户：如果方法返回 true，则用户被重定向到“投票”。

归档这个最好的方法是什么？我怎样才能做到这一点或两点来获得条件路由？

这是我使用 isAuthenticated() 方法的路由配置：

import {Component} from 'angular2/core'
import {HTTP_PROVIDERS, Http} from 'angular2/http';
import 'rxjs/Rx'; // load the full rxjs
import {RouteConfig, ROUTER_DIRECTIVES, Router} from 'angular2/router';


import { PollsComponent } from './pollslist/pollslist.component'
import { Login } from './login/login'

@Component({
    selector: 'my-app',
    templateUrl: 'app/app.component.html',
    directives: [ROUTER_DIRECTIVES, Login, PollsComponent],
    providers: [HTTP_PROVIDERS]
})

@RouteConfig([
    { path: '/login', name: 'Login', component: Login, useAsDefault: true },
    { path: '/polls', name: 'Polls', component: PollsComponent }

])

export class AppComponent {
    isAuthenticated() {
        if (localStorage.getItem('id')) {
            return true;
        } else {
            return false;
        }

    }

}

【问题讨论】：

标签： javascript angular typescript angular2-routing

【解决方案1】：

你可以签到

@CanActivate() 并使用 router.navigate() 导航到不同的路线
或创建一个自定义的<router-outlet>，您可以在其中执行此操作。

详情见https://medium.com/@blacksonic86/authentication-in-angular-2-958052c64492#.f76jyafdn

另见Check if the user logged in on any page change in Angular 2

【讨论】：

什么是最好的方法，@CanActivate() 还是自定义路由器插座？从我在使用@CanActivate() 的帖子中读到的内容“目前在 beta.8 版本中此功能的一个严重缺点......要访问 DI，我们需要一些 hack 才能使其工作”，但现在我们正在无论如何，beta 14 似乎更容易创建路由器插座，这是正确的吗？
@CanActivate() 中的 DI 仍然需要破解。路由器目前正在返工，这是计划修复的一个问题。如果对大多数路由或路由组件有不同的检查，我会选择@CanActivate()，如果对所有（或大多数）组件进行相同的检查（如isLoggedIn），我会使用自定义<router-outlet>。
我使用帖子的代码：activate(instruction: ComponentInstruction) { if (this._canActivate(instruction.urlPath)) { return super.activate(instruction); } this.router.navigate(['Login']);但是当它转到 else 语句并尝试导航到 Login 时，它会在 activate 方法中不断循环，导致应用程序崩溃。

【解决方案2】：

路由器definition有loader参数：

loader : () => Promise<Type>

允许动态和异步地确定组件类型。

【讨论】：