authentication - example - "¡Sin proveedor para AuthGuard!" Usando CanActivate en Angular 2

canactivate angular 6

Question

EDITAR: Obviamente, esto está desactualizado, ahora usted proporciona su guardia en la matriz de providers en un NgModule. Vea otras respuestas o documentación oficial para más información.

• el arranque en un componente está desactualizado
• provideRouter() está desactualizado

Estoy intentando configurar Autenticación en mi proyecto, usando un inicio de sesión y AuthGuard de la guía Angular2: https://angular.io/docs/ts/latest/guide/router.html

Estoy usando el lanzamiento: "@ angular / enrutador": "3.0.0-beta.1".

Trataré de explicar todo lo que pueda, no dude en decirme si necesita más detalles.

Tengo mi archivo main.ts que boostraps la aplicación con el siguiente código:

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

Cargué el MasterComponent, que carga un encabezado que contiene botones que me permiten navegar a través de mi aplicación y también contiene mi principal por ahora.

Estoy siguiendo la guía para hacer que mi aplicación funcione de la misma manera, con la siguiente app.routes.ts :

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

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

Y el login.routes.ts de la guía, que define mi AuthGuard:

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

export const AUTH_PROVIDERS = [AuthGuard, AuthService];

mi componente maestro tiene su propia definición de ruta, que también contiene el protector que estoy tratando de configurar. master.routes.ts :

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

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

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

Y estoy usando los mismos archivos que la guía, que son auth.guard.ts , auth.service.ts , login.component.ts y login.routes.ts .

En mi archivo header.component.ts , cuando intento acceder a cualquier ruta, funciona muy bien, pero cuando intento acceder a la ruta protegida (/ tablero), ¡obtengo el proveedor No de AuthGuard! error.

Vi la publicación reciente con el mismo problema que la mía ( NoProviderError usando CanActivate en Angular 2 ), pero para mí la guardia se carga de forma automática hasta el archivo main.ts , por lo que mi enrutador debería saber qué rutas deberían proporcionarse con AuthGuard right ?

Cualquier ayuda o consejo sería muy apreciado. Gracias !

Answer 1

Además, no caiga en la trampa de usar un literal para la clase de guardia dentro de su configuración de enrutamiento, solo porque algunos artículos de blog lo hacen:

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

no va a funcionar ( No provider for... ), en su lugar, use la clase directamente:

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

Otra sugerencia, cuando los componentes de carga son perezosos, el protector se aplica en la configuración de enrutamiento del componente principal, no en la configuración de enrutamiento del componente con carga diferida.

Answer 2

En realidad, fue solo un error tipográfico en una importación ...

Estaba escribiendo

importar {AuthGuard} desde ''./../Authentification/auth.guard'';

en lugar de

importar {AuthGuard} desde ''./../authentification/auth.guard'';

haciendo que no funcione, pero al mismo tiempo no me muestra ningún error ...

(cara triste)

Answer 3

Encontré este problema cuando estaba siguiendo un tutorial. Probé la mayoría de la respuesta aquí pero no tuve éxito. Luego probé de la manera más tonta, como poner AuthGuard antes que los otros servicios en el proveedor y funciona.

// app.module.ts

 .. 
 providers: [
   AuthGuard,
   UserService,
   ProjectService
  ]

Answer 4

La importación de HttpModule y HttpClientModule me ayudó.

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

Answer 5

La respuesta está más abajo en el tutorial. Consulte los listados de archivos en el tema "Agregar el componente de inicio de sesión" en la sección "Ruta sin componentes: ..." en "Hito 5: Protectores de rutas". Muestra que AuthGuard y AuthService se importan y añaden a la matriz de proveedores en login-routing.module.ts, y luego ese módulo se importa a 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 {}

app.module.ts

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

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

Answer 6

Para aquellos que aún tienen este error, no olviden incluir su servicio o clase AuthGuard en la función principal de arranque. Y no olvides importar este servicio antes de que se ejecute el arranque.

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

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

bootstrap(AppComponent, [
  appRouterProviders,
  AuthGuard
]);

El equipo de Angular 2 no mencionó esto en los documentos principales del enrutador, y tardé un par de horas en descifrarlo.

Answer 7

Tuve este mismo problema después de revisar la sección de Route Guards del tutorial sobre enrutamiento y autorización en el sitio web de Angular https://angular.io/docs/ts/latest/guide/router.html , es la sección 5.

Estoy agregando AuthGuard a una de mis rutas principales y no a rutas secundarias como muestra el tutorial.

Lo arreglé agregando AuthGuard a mi lista de proveedores en mi archivo app.module.ts, de modo que el archivo ahora se ve así:

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 { }

He vuelto al tutorial y en su archivo app.module.ts, no agregan AuthGuard a los proveedores, no estoy seguro de por qué.

Answer 8

Ya que obtuviste la solución como era debido al problema de sintaxis. Solo quería compartir esta información.

Necesitamos proporcionar AuthGaudSerivce como proveedor solo en ese módulo que corresponda a la ruta respectiva. No es necesario proporcionar en el módulo principal o el módulo raíz ya que el módulo principal cargará automáticamente todo el submódulo dado. Esto ayuda a mantener el código modular y encapsulado.

por ejemplo, supongamos que tenemos el siguiente escenario

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 

A continuación se muestra solo un prototipo, no el código real para entender el propósito

//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{}    

Answer 9

puede intentar importar AuthGuard en el proveedor de ese módulo y luego importarlo en el archivo de enrutamiento component-routing.module.ts también

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

Answer 10

import { Injectable } from ''@angular/core'';
import { Router, CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot } from ''@angular/router'';

@Injectable()
export class AuthGuard implements CanActivate {

    constructor(private router: Router) { }

    canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) {
        if (localStorage.getItem(''currentUser'')) {
            // logged in so return true
            return true;
        }

        // not logged in so redirect to login page with the return url
        this.router.navigate([''/login''], { queryParams: { returnUrl: state.url }});
        return false;
    }
}