如何为路线添加条件

时间:2017-02-20 17:02:31

标签: angular typescript

我正在尝试使用他们的教程添加Auth0的授权: https://auth0.com/docs/quickstart/spa/angular2/07-authorization

我正在使用ng2-admin,但它们的结构与通常不同。我找到了pages.routing.ts并且我添加了第三个参数。我还从教程中创建了另一个auth.guard服务。但每当我进入我正在使用canActivate的页面时。它只是加载背景并说:EXCEPTION: Uncaught (in promise): Error: DI Error

我做了很多调试,我99%肯定是导致问题的canActivate。甚至不调用其他类。

在auth0网站上的例子中,它还提到:

export const appRoutingProviders: any[] = [
  AuthGuard
];

我尝试添加,但这并没有改变任何东西。

我想调用canActivate的路由,以便我可以进行Auth0的身份验证。

import { Routes, RouterModule }  from '@angular/router';
import { Pages } from './pages.component';
import { ModuleWithProviders } from '@angular/core';
import { AuthGuard } from '../auth.guard';
export const routes: Routes = [
  {
    path: 'login',
    loadChildren: 'app/pages/login/login.module#LoginModule'
  },
  {
    path: 'register',
    loadChildren: 'app/pages/register/register.module#RegisterModule'
  },
  {
    path: 'pages',
    component: Pages,
    children: [
      { path: '', redirectTo: 'dashboard', pathMatch: 'full' },
      { path: 'dashboard', loadChildren: 'app/pages/dashboard/dashboard.module#DashboardModule',canActivate: [AuthGuard] },
      { path: 'editors', loadChildren: 'app/pages/editors/editors.module#EditorsModule',canActivate: [AuthGuard] },
      { path: 'components', loadChildren: 'app/pages/components/components.module#ComponentsModule',canActivate: [AuthGuard] },
      { path: 'charts', loadChildren: 'app/pages/charts/charts.module#ChartsModule',canActivate: [AuthGuard] },
      { path: 'ui', loadChildren: 'app/pages/ui/ui.module#UiModule',canActivate: [AuthGuard] },
      { path: 'forms', loadChildren: 'app/pages/forms/forms.module#FormsModule',canActivate: [AuthGuard] },
      { path: 'tables', loadChildren: 'app/pages/tables/tables.module#TablesModule',canActivate: [AuthGuard] },
      { path: 'maps', loadChildren: 'app/pages/maps/maps.module#MapsModule',canActivate: [AuthGuard] },
      { path: 'new', loadChildren: 'app/pages/new/new.module',canActivate: [AuthGuard] }
    ]
  }
];

1 个答案:

答案 0 :(得分:2)

在路由文件中尝试:

@NgModule({
  imports: [ 
    RouterModule.forRoot(routes), 
   ],
providers: [
    AuthGuard //add AuthGuard to provider
  ]
})

您还可以将AuthGuard添加到AppModule提供商,这样您就不需要在每个路由文件中提供它。