Question

自从我更新到angular的最新路由器（3.0.0-beta.2）后，我遇到了一个奇怪的问题

如果我执行此代码

this._router.navigate(['/login']);

我的应用程序中的任何地方都可以正常工作，除非用户第一次导航到该页面，并且需要重定向才能登录。不会抛出任何错误，它只是不会重定向。

这是我的代码：

main.ts文件：

bootstrap(AppComponent, [APP_ROUTER_PROVIDERS, HTTP_PROVIDERS, ApplicationConfiguration, provide(Http, {
  useFactory: (xhrBackend: XHRBackend, requestOptions: RequestOptions, router: Router, appConfig: ApplicationConfiguration) => new HttpServiceLayer(xhrBackend, requestOptions, router, appConfig),
  deps: [XHRBackend, RequestOptions, Router, ApplicationConfiguration]
})]);

app.component.ts：

export class AppComponent {
constructor(private appConfig: ApplicationConfiguration,  private _router: Router) {
if (!this.appConfig.isUserLoggedIn()) {
      this._router.navigate(['/login']);
    }
 }
}

export const routes: RouterConfig = [
  { path: 'login', component: LogInComponent },
  { path: 'dashboard', component: DashboardComponent },
  { path: '', redirectTo: '/dashboard', pathMatch: 'full' }
];

export const APP_ROUTER_PROVIDERS = [
  provideRouter(routes)
];

可能是我没有做正确的事情，但这段代码曾经在更新之前工作。

是否有人知道路由器为什么不将用户重定向到登录页面？

感谢任何帮助。

解决方案： 在仪表板路线上使用Guard应该可以解决问题。

export class AppComponent {
  constructor() {}
}

export const routes: RouterConfig = [
  { path: 'login', component: LogInComponent },
  { path: 'dashboard', component: DashboardComponent, canActivate: [DashboardGuard]},
  { path: '', redirectTo: '/dashboard', pathMatch: 'full' }
];

export const APP_ROUTER_PROVIDERS = [
  provideRouter(routes)
];

@Injectable()
export class DashboardGuard implements CanActivate {
  constructor(private appConfig: ApplicationConfiguration, private _router: Router) {}

  canActivate() {
    if (this.appConfig.isUserLoggedIn()) { return true; }
    this._router.navigate(['/login']);
    return false;
  }
}

在main.ts中，您需要添加DashboardGuard作为提供者。

Answer 1

在仪表板路线上使用Guard应该可以解决问题。

export class AppComponent {
  constructor() {}
}

export const routes: RouterConfig = [
  { path: 'login', component: LogInComponent },
  { path: 'dashboard', component: DashboardComponent, canActivate: [DashboardGuard]},
  { path: '', redirectTo: '/dashboard', pathMatch: 'full' }
];

export const APP_ROUTER_PROVIDERS = [
  provideRouter(routes)
];

@Injectable()
export class DashboardGuard implements CanActivate {
  constructor(private appConfig: ApplicationConfiguration, private _router: Router) {}

  canActivate() {
    if (this.appConfig.isUserLoggedIn()) { return true; }
    this._router.navigate(['/login']);
    return false;
  }
}

Angular2路由器在应用程序

1 个答案: