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:
- 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;
}
}
}
- 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.
- 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 { }