条件路由在 Angular 2 中更改默认路由
Conditional routing change default route in Angular 2
我正在创建一个应用程序,当用户进入页面时,他会转到默认路由 "Login" 页面。我想要的是基于一个条件(如果用户有一个本地存储变量 id,一个名为 isAuthenticaded() returns true if not false 的方法)用户必须看到 "Polls" 页面而不是 "Login" 页。
我认为有两种不同的方式来解决这个问题:
1- 更改默认页面:如果方法 returns 为真,则默认页面应为 "Polls" 如果不是 "Login".
2- 重定向用户:如果方法 returns true 用户被重定向到 "Polls".
实现此目标的最佳方式是什么?
我怎样才能做一个或两个点来获得条件路由?
这是我使用 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;
}
}
}
您可以入住
@CanActivate()
并使用 router.navigate()
导航到另一条路线
或在执行此操作的地方创建自定义 <router-outlet>
。
详情见https://medium.com/@blacksonic86/authentication-in-angular-2-958052c64492#.f76jyafdn
另见
路由器 definition 有 loader
参数:
loader : () => Promise<Type>
允许动态和异步确定组件类型。
我正在创建一个应用程序,当用户进入页面时,他会转到默认路由 "Login" 页面。我想要的是基于一个条件(如果用户有一个本地存储变量 id,一个名为 isAuthenticaded() returns true if not false 的方法)用户必须看到 "Polls" 页面而不是 "Login" 页。 我认为有两种不同的方式来解决这个问题:
1- 更改默认页面:如果方法 returns 为真,则默认页面应为 "Polls" 如果不是 "Login".
2- 重定向用户:如果方法 returns true 用户被重定向到 "Polls".
实现此目标的最佳方式是什么? 我怎样才能做一个或两个点来获得条件路由?
这是我使用 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;
}
}
}
您可以入住
@CanActivate()
并使用router.navigate()
导航到另一条路线
或在执行此操作的地方创建自定义
<router-outlet>
。
详情见https://medium.com/@blacksonic86/authentication-in-angular-2-958052c64492#.f76jyafdn
另见
路由器 definition 有 loader
参数:
loader : () => Promise<Type>
允许动态和异步确定组件类型。