3

Buenas a todos estoy armando una aplicación con angular en la que estoy haciendo un login y quiero proteger las rutas con un guard.

en el guard tengo el siguiente código:

import { inject } from '@angular/core';
import { CanActivateFn, Router } from '@angular/router';

export const authGuard: CanActivateFn = (route, state) => {

  const router = inject(Router)

  if(!!localStorage.getItem('token')){
    return true
  }else{
    router.navigateByUrl('/login')
    return false
  }
};

y luego en el router lo llamo de la siguiente manera:

const routes: Routes = [
  {path:'', component:HomeComponent},
  {path:'home', component:HomeComponent},
  {path: 'admin', component:AdminComponent,canActivate: [authGuard]},
  {path: 'ligas', component:AdminLigasComponent},
  {path: 'login', component:LoginComponent},

];

La aplicación funciona bien y responde como tiene que responder, pero en la consola de vs estudio me da el siguiente error:

ERROR ReferenceError: localStorage is not defined
    at authGuard (C:\apps\Shorti\shortiweb\src\app\guards\auth.guard.ts:9:3)
    at eval (C:\apps\Shorti\shortiweb\node_modules\@angular\router\fesm2022\router.mjs:3375:134)
    at Module.runInInjectionContext (C:\apps\Shorti\shortiweb\node_modules\@angular\core\fesm2022\core.mjs:3400:16)
    at eval (C:\apps\Shorti\shortiweb\node_modules\@angular\router\fesm2022\router.mjs:3375:89)
    at _Observable.eval (C:\apps\Shorti\shortiweb\node_modules\rxjs\dist\esm\internal\observable\defer.js:5:19)
    at _Observable._trySubscribe (C:\apps\Shorti\shortiweb\node_modules\rxjs\dist\esm\internal\Observable.js:37:25)
    at eval (C:\apps\Shorti\shortiweb\node_modules\rxjs\dist\esm\internal\Observable.js:31:30)
    at errorContext (C:\apps\Shorti\shortiweb\node_modules\rxjs\dist\esm\internal\util\errorContext.js:19:9)
    at _Observable.subscribe (C:\apps\Shorti\shortiweb\node_modules\rxjs\dist\esm\internal\Observable.js:22:9)
    at eval (C:\apps\Shorti\shortiweb\node_modules\rxjs\dist\esm\internal\operators\take.js:10:20)

y no entiendo qué es lo que pasa, ni cómo solucionarlo.

2
  • Qué versión de Angular estas usando?
    – René
    Commented el 25 ago. a las 5:44
  • la version es angular 17 Commented el 26 ago. a las 1:14

1 respuesta 1

3

Ese error es porque localStorage no está disponible durante la renderización en el lado del servidor (SSR).

Solución: asegúrate de que localStorage solo se acceda en el navegador, agregando una verificación.

if (typeof window !== 'undefined' && !!localStorage.getItem('token')) {
  return true;
}
1
  • funciono correctamente, muchas gracias Commented el 26 ago. a las 1:16

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.