1

Tengo realizado en Angular2 un sistema de login, donde recojo un token desde una API y la almaceno en el localstorage.

Estoy utilizando guard para la protección de rutas, si no estas autentificado no puedes ver nada de la aplicación. De esta forma, tengo todas mis rutas:

{path: 'grupo', component: GrupoComponent, canActivate: [AuthenticationGuard]}

Y así tengo el código para el método canActivated:

@Injectable()
export class AuthenticationGuard implements CanActivate {
    constructor(private auth: AuthService) { }

    canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean {
        return this.auth.isLogged();
    }
}

Y este es el servicio que utilizo para el sistema de login:

@Injectable({ providedIn: 'root' })
export class AuthService{

    URL = "ruta-URL";

    constructor(private http: HttpClient){
    }

    login(login){

        let parametros = new HttpParams();
        parametros = parametros.append('grant_type','password');
        parametros = parametros.append('scope','admin editor basic');
        parametros = parametros.append('username',login.username);
        parametros = parametros.append('password',login.password);
    
        const opciones = {
          headers: new HttpHeaders({
            'Content-Type':'--- lo que sea ---',
            'Authorization': '--- lo que sea ---'
          }),
          params: parametros
        };

        return this.http.post(`${this.URL}/token`,login,opciones);
    }

    isLogged(){
      
        let resul = false;

        if(localStorage.getItem('access_token') && localStorage.getItem('expire_in')){
            resul = true;
        }
        return resul;
    }

    logout(){
      localStorage.removeItem('access_token');
      localStorage.removeItem('expire_in');
    }
}

El problema es que el usuario tiene tres tipos: Administrador, Editor o Básico. Y dependiendo del tipo que sea, puede hacer una cosa u otra en la aplicación. Principalmente cuando inicia sesión, si es admin debo redirigir a un sitio, y en el caso de ser otro tipo pues a otro sitio.

¿Como podría hacer esto? No entiendo muy bien el como proteger las rutas, y el acceder a determinado sitio usando el tipo del usuario.

EDITO

Si por ejemplo, inicio sesión con un usuario tipo administrador, puedo acceder a todas las URL, pero si soy un usuario tipo básico o editor solo puedo tener acceso a algunas URL. No solo tendría que redirigir a una URL u otra, sino que también prohibir el acceso a ciertas URL dependiendo el tipo de usuario.

1 respuesta 1

2

Basicamente desde tu servicio debes redirigir con

//El import en el constructor:

constructor(private router: Router)
//.... logica que comprueba el tipo de usuario


//Aqui seleccionamos la pagina a la que deberia redirijir
this.router.navigate(["/contenido-segun-tipo-de-usuario"])

Creas otro guard (ComprobarPermisosGuard) que compruebe los permisos, de esta manera tu AuthenticationGuard quedara limpio y entendible.

Deberia contener la siguiente logica:

  canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean {
      let permisosRequeridos= route.data.permisos    

      let tienePermiso = this.auth.elUsuarioLogueado
                        .susPermisosArray
                        .some(p=> permisosRequeridos.includes(p) )
      
      //Aqui puede ir un mensaje de que no tiene permiso
      if(!tienePermiso) this.router.navigate(["/miPaginaGeneral"])  
      return this.tienePermiso
  }

Y por ultimo, agregas a tu ruta la siguiente estructura:

{    path: 'contenido-segun-tipo-de-usuario', 
     component: componenteSegunTipoDeUsuario,  
     canActivate: [AuthenticationGuard, ComprobarPermisosGuard]
     //De aqui viene el route.data.permisos en el guard
     data: { permisos: ["administrador"]}
}

5
  • No entiendo muy bien la idea Commented el 31 ago. 2020 a las 18:06
  • Hola. Cual es la parte que no entiendes?
    – Legna
    Commented el 31 ago. 2020 a las 18:47
  • Con este código permito a los administradores navegar por la aplicación, pero si quiero agregar otro tipo en el permiso, ¿como lo haría? Es decir, quiero que el admin vaya a todas las url, pero un tipo básico solo pueda ir a 3 de todas las URL. No se si me explico... Commented el 31 ago. 2020 a las 20:06
  • Si te fijas en la ruta se agrega un parametro data con una propiedad permisos. En esa parte colocas un arreglo con los permisos requeridos. Si el admin puede ir a donde sea, dentro del guard puedes comprobar si realmente tiene ese permiso, por ejemplo, en el token. Si lo tiene, ya no es necesario comprobar lo demas. Si no lo tiene, pues ahora si utiliza la logica expuesta extrayendo el arreglo de permisos necesarios o que deba contener (por lo menos 1) desde permisos y el token del usuario.
    – Legna
    Commented el 1 sept. 2020 a las 0:12
  • El termino correcto en tu caso no es permiso, seria rol. Si tiene el rol de administrador puede activar el contenido, si no lo tiene, hay que comprobar que roles tiene,
    – Legna
    Commented el 1 sept. 2020 a las 0:14

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.