2

Hola esta es mi primera pregunta en stackoverflow! Estoy empezando en la programación en Angular, mi proyecto usa la versión 7.0.5 de Angular Cli y me estoy encontrando con este mensaje de error al intentar aplicar un Guard sobre las rutas.

La intención es redirigir a Login si el usuario no está validado o su validación ha caducado.

Os pongo un poco de código:

  1. Mi Guard
import { Injectable } from '@angular/core';
import { Router, CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot, UrlTree } from '@angular/router';
import { MatSnackBar } from '@angular/material';
import { Observable, of } from 'rxjs';
import { map, catchError } from 'rxjs/operators';

import { StorageService } from "../modules/usuarios/services/storage.service";
import { UsuariosService } from '../modules/usuarios/services/usuarios.service';


@Injectable({
    providedIn: 'root'
})
export class AuthorizatedGuard implements CanActivate {

    token: string;
    id: string

    constructor(private strServices: StorageService, private UseServ: UsuariosService, private _snackBar: MatSnackBar,
        private router: Router) { }


    canActivate(next: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<boolean> | boolean | Observable<UrlTree> | UrlTree {

        //Comprobamos que hay una autentificación almacenada 
        if (this.strServices.isAuthenticated()) {

            //Recuperamos el token
            this.token = this.strServices.getCurrentToken();
            //Recuperamos el Id
            this.id = this.strServices.getCurrentId();

            //Con el servicio comprobamos que siga siendo válida.
            this.UseServ.sendToken(this.token, this.id).pipe(map(result => {

                //si es correcta almacenamos los datos de usuario y devolvemos el true
                this.strServices.setCurrentUser(result);
                return true;
            }),
                // Si la petición tiene un error sacamos mensaje y se dirige al login
                catchError(error => {
                    
                    // Error acceso no autorizado
                    if (error.status == '401')
                        this._snackBar.open(
                            error.error, null,
                            { duration: 5000, horizontalPosition: 'center', panelClass: 'red' }
                        );
                    else // Cualquier otro error
                        this._snackBar.open(
                            'Error de servidor : ' + error.message, null,
                            { duration: 5000, horizontalPosition: 'center', panelClass: 'red' }
                        );

                    return of(this.router.createUrlTree(['/login']))
                })
            );

        }
        else {
            return false;
        }
    }

}
  1. Mis rutas
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { AuthorizatedGuard } from './guards/authorizated.guard';
import { LoginComponent } from './modules/usuarios/login/login.component'
import { BannerModule } from './modules/banner/banner.module';


const routes: Routes = [
  { path: '', redirectTo: '/banner', pathMatch: 'full' },
  { path: 'gpv', redirectTo: '/banner' },
  { path: 'banner', component: BannerModule, canActivate: [AuthorizatedGuard] },
  { path: 'login', component: LoginComponent },
  { path: '**', redirectTo: '/banner' }
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

Agradecería cualquier guía para salir del atasco, primeramente probé con un suscribe en lugar del pipe con el map pero me daba el mismo error.


Vale lo encontré!! Edito porque se me pasó añadir una información que ha resultado clave, tras horas de intensa búsqueda y pruebas varias. añado mi AppModule.

  1. Mi AppModule
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { FormsModule } from '@angular/forms';
import { MatGridListModule } from '@angular/material/grid-list';

import { SidenavSublinkItemComponent } from '../sidenav/src/sidenav-sublink-item/sidenav-sublink-item.component';
import { SidenavItemComponent } from '../sidenav/src/sidenav-item/sidenav-item.component';
import { SidenavComponent } from '../sidenav/src/sidenav.component';
import { ResponsiveSidenavModule } from '../sidenav/src/sidenav.module';
import {
  MatTooltipModule,
  MatCardModule,
  MatSidenavModule,
  MatToolbarModule,
  MatButtonModule,
  MatIconModule,
  MatDialogModule
} from '@angular/material';
import { RouterModule } from '@angular/router';
import { APP_BASE_HREF } from '@angular/common';
import { HttpClientModule } from '@angular/common/http';
import { LocationStrategy, Location, PathLocationStrategy, HashLocationStrategy } from '@angular/common';

import { BannerModule } from './modules/banner/banner.module';
import { SuccessPictureModule } from './modules/success-picture/success-picture.module';
import { ManchetasModule } from './modules/manchetas/manchetas.module';
import { AgreementsPictureModule } from './modules/agreements-picture/agreements-picture.module';
import { IncidencesModule } from './modules/incidences/incidences.module';
import { UsuariosModule } from './modules/usuarios/usuarios.module';

import { AppComponent } from './app.component';
import { HelloComponent } from './hello.component';
import { validateAuth } from './shared/validate-auth';
import { AuthGuard } from './guards/auth.guard';
import { AppRoutingModule } from './app-routing.module';



@NgModule({
  imports: [
    RouterModule.forRoot([], { useHash: true }), CommonModule, AppRoutingModule,
    BrowserModule, MatGridListModule, BrowserAnimationsModule, FormsModule, HttpClientModule,
    MatButtonModule, MatCardModule, MatTooltipModule, MatToolbarModule, MatIconModule, ResponsiveSidenavModule, MatSidenavModule, MatDialogModule,
    BannerModule, SuccessPictureModule, AgreementsPictureModule, IncidencesModule, ManchetasModule, UsuariosModule
  ],
  exports: [ResponsiveSidenavModule],
  declarations: [AppComponent, HelloComponent],
  bootstrap: [AppComponent],
  providers: [{ provide: LocationStrategy, useClass: HashLocationStrategy },
  { provide: validateAuth }, { provide: AuthGuard }]
})
export class AppModule { }

1 respuesta 1

1

Y ahora contesto a mi propia pregunta!

Para solucionar el error hay que sacar el Guard como proveedor del AppModule, que la verdad entre tantas lecturas no se donde había leído que había que meterlo, pero me ha vuelto loco!

@NgModule({
  imports: [
    RouterModule.forRoot([], { useHash: true }), CommonModule, AppRoutingModule,
    BrowserModule, MatGridListModule, BrowserAnimationsModule, FormsModule, HttpClientModule,
    MatButtonModule, MatCardModule, MatTooltipModule, MatToolbarModule, MatIconModule, ResponsiveSidenavModule, MatSidenavModule, MatDialogModule,
    BannerModule, SuccessPictureModule, AgreementsPictureModule, IncidencesModule, ManchetasModule, UsuariosModule
  ],
  exports: [ResponsiveSidenavModule],
  declarations: [AppComponent, HelloComponent],
  bootstrap: [AppComponent],
  providers: [{ provide: LocationStrategy, useClass: HashLocationStrategy },
  { provide: validateAuth }]
})
export class AppModule { }

Espero que os sirva!

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.