Authentication &引用；没有AuthGuard的提供程序&引用；在Angular 2中使用CanActivate

编辑：显然这已经过时了，现在您可以在NgModule中的

提供程序

阵列中提供保护。查看其他答案或官方文档以了解更多信息

• 组件上的引导已过时

• provideRouter（）

  也已过时

---

---

我正在尝试使用Angular2指南中的登录名和AuthGuard在我的项目中设置身份验证：

我使用的版本是：“@angular/router”：“3.0.0-beta.1”

我会尽可能多地解释，如果你需要更多细节，请随时告诉我

---

我有我的main.ts文件，该文件使用以下代码增强应用程序：

bootstrap(MasterComponent, [
    APP_ROUTER_PROVIDERS,
    MenuService
])
.catch(err => console.error(err));

我加载MasterComponent，它加载一个标题，其中包含允许我在应用程序中导航的按钮，它还包含我目前的主组件

我正在按照指南使用以下app.routes.ts使我的应用程序以同样的方式工作：

export const routes: RouterConfig = [
    ...LoginRoutes,
    ...MasterRoutes
];

export const APP_ROUTER_PROVIDERS = [
    provideRouter(routes),
    AUTH_PROVIDERS
];

以及指南中定义我的AuthGuard的login.routes.ts：

export const LoginRoutes = [
    { path: 'login', component: LoginComponent }
];

export const AUTH_PROVIDERS = [AuthGuard, AuthService];

我的主组件有自己的路由定义，其中也包含我试图设置的防护master.routes.ts：

export const MasterRoutes : RouterConfig = [
    { path: '', redirectTo: '/accueil', pathMatch: 'full' },

    {
        path: 'accueil',
        component: AccueilComponent
    },

    { path: 'dashboard', component: DashboardComponent, canActivate: [AuthGuard] },
];

我使用与指南相同的文件，它们是auth.guard.ts，auth.service.ts，login.component.ts和login.routes.ts

---

在我的header.component.ts文件中，当我尝试访问任何路由时，它工作正常，但是当我尝试访问受保护路径（/dashboard）时，我得到了AuthGuard的无提供程序错误

我看到了与我的（）相同的问题的最新帖子，但对我来说，该保护已正确引导到main.ts文件，因此我的路由器应该知道应该为哪些路由提供AuthGuard权限

任何帮助或建议都将不胜感激。

---

谢谢

事实上，这只是一个输入错误

我在打字

从“/../authentication/auth.guard”导入{AuthGuard}

而不是

从“/../authentication/auth.guard”导入{AuthGuard}

使其不工作，但同时不向我显示任何错误

---

（sadface）

对于仍有此错误的用户，不要忘记将AuthGuard服务或类包含到主引导函数中。 不要忘记在引导运行之前导入此服务

import { bootstrap } from '@angular/platform-browser-dynamic';

import { AppComponent } from './app.component';
import { AuthGuard } from './shared/auth.service';

bootstrap(AppComponent, [
  appRouterProviders,
  AuthGuard
]);

---

Angular 2团队在主路由器文档中没有提到这一点，我花了几个小时才弄明白。

因为语法问题，您得到了解决方案。我只是想分享这些信息

我们只需要在对应于相应路由的模块中提供AuthGaudSerivce作为提供者。无需在主模块或根模块中提供，因为主模块将自动加载所有给定的子模块。这有助于保持代码模块化和封装

例如，假设我们有以下场景

1. we have module m1
2. we have route m1r in module m1
3. route m1r has 2 route r1 and r2
4. we want to protect r1 using authGaurd
5. finally we have main module that is dependent on sub module m1 

下面只是原型，不是理解目的的实际代码

//m1.ts    
import {AuthGaurd} from './auth.gaurd.service'
import {m1r} from './m1r'
    @NgModule(
     imports: [m1r],
     providers: [AuthGaurd]
    )
    export class m1{
    }

//m1r.ts
import {AuthGaurd} from './auth.gaurd.service'
const authRoute = [
 {path: '/r1', component: 'authComponent', canActivate: [AuthGaurd]},
 {path: '/r2', component: 'other'}
]
export authRoute

//main.module.ts
import {m1} from ''
import {mainComponent} from ''
@NgModule({
  imports: [m1],
  bootstrap: [mainComponent]
  })
export class MainModule{}    

---

在浏览Angular网站上的路由和授权教程的路由守卫部分后，我遇到了同样的问题，它是第5部分

我正在将AuthGuard添加到我的一条主路线，而不是像教程所示的子路线

我通过将AuthGuard添加到我的app.module.ts文件中的提供商列表中修复了它，因此该文件现在如下所示：

import { AppComponent } from './app.component';
import {AppRoutingModule} from './app-routing.module';
import {AuthGuard} from './auth-gaurd.service';

import { AnotherPageComponent } from './another-page/another-page.component';
import { LoginPageComponent } from './login-page/login-page.component';

@NgModule({
  imports: [
    BrowserModule,
    FormsModule,
    JsonpModule,
    AppRoutingModule,
    HttpModule
  ],
  declarations: [
    AppComponent,
    LoginPageComponent,
    AnotherPageComponent
  ],
  providers: [AuthGuard],
  bootstrap: [AppComponent]
})

export class AppModule { }

---

我已经回顾了教程，在他们的app.module.ts文件中，他们没有将AuthGuard添加到提供者，也不知道为什么。

此外，不要落入在路由配置中为guard类使用文本的陷阱，因为有些博客文章会：

{ path: 'whatever', component: WhatEverComponent, canActivate: ['WhatEverGuard'] }

不起作用（

没有…

的提供程序），请直接使用该类：

{ path: 'whatever', component: WhatEverComponent, canActivate: [WhatEverGuard] }

---

另一个提示是，当延迟加载组件时，保护将应用于父组件的路由配置，而不是延迟加载组件的路由配置。

您可以尝试在该模块的提供程序中导入AuthGuard，然后也将其导入路由组件-routing.module.ts文件中

@NgModule({
providers: [
    AuthGuard
  ],})

---

我在学习教程时遇到了这个问题。我在这里尝试了大部分答案，但没有获得任何成功。然后，我尝试了一种愚蠢的方式，比如将AuthGuard放在提供者中的其他服务之前，然后它就工作了

// app.module.ts

 .. 
 providers: [
   AuthGuard,
   UserService,
   ProjectService
  ]

---

答案将在本教程中进一步介绍。请参阅“里程碑5：路由保护”中“无组件路由：…”部分下“添加LoginComponent”主题中的文件列表。它显示正在导入并添加到login-routing.module.ts中的providers数组中的AuthGuard和AuthService，然后将该模块导入到app.module.ts中

login-routing.module.ts

  ...
    import { AuthGuard }            from './auth-guard.service';
    import { AuthService }          from './auth.service';
    ...
    @NgModule({
    ...
      providers: [
        AuthGuard,
        AuthService
      ]
    })
    export class LoginRoutingModule {}

import { LoginRoutingModule }      from './login-routing.module';

@NgModule({
  imports: [
    ...
    LoginRoutingModule,
    ...    
  ],
  ...
  providers: [
    DialogService
  ],
  ...

app.module.ts

  ...
    import { AuthGuard }            from './auth-guard.service';
    import { AuthService }          from './auth.service';
    ...
    @NgModule({
    ...
      providers: [
        AuthGuard,
        AuthService
      ]
    })
    export class LoginRoutingModule {}

import { LoginRoutingModule }      from './login-routing.module';

@NgModule({
  imports: [
    ...
    LoginRoutingModule,
    ...    
  ],
  ...
  providers: [
    DialogService
  ],
  ...

---

导入

HttpModule

和

HttpClientModule

对我有帮助

import { HttpClientModule } from '@angular/common/http'; 
import { HttpModule } from '@angular/http';

尝试添加

@注射的({
providedIn:'根'
})

---

无需添加到模块提供程序。

这发生在我错误设置路由时：

错误

const routes: Routes = 
[
  { 
    path: 'my-path', 
    component: MyComponent, 
    resolve: { myList: MyListResolver, canActivate: [ AuthenticationGuard ] } 
  },
];

请注意，在这种情况下，

canActivate

意外成为

resolve

对象的一部分

正确

const routes: Routes = 
[
  { 
     path: 'my-path', 
     component: MyComponent, 
     resolve: { myList: MyListResolver }, 
     canActivate: [ AuthenticationGuard ] 
  },
];

---

您是否将

AuthGuard

导入

master.routes.ts

和

login.routes.ts

？是的，我正确导入了它们。我没有提到它，但我手动导航到该路由，因为我想使用此.router.navigate（['/dashboard']）链接到一个路由器上；奇怪的是，我公司的防火墙实际上阻止了plunkr链接，所以我可能需要一点时间。。。我将用一个有效的链接编辑这篇评论，希望你能接受。很高兴听到你找到了答案。这就是为什么建议使用类型脚本编辑器，比如Visual studio代码（这是最好的）。是的，我一直在使用VS 2015，但很明显，它是