Home / Questions / 382795
Accepted
D. Albarracín
Asked: 2020-08-19 00:23:22 +0800 CST 2020-08-19 00:23:22 +0800 CST

Prohibit browsing to another URL without login in Angular

  • 772

I have a login via Token made with Angular. Once I log in (with the correct data) I navigate to another window like this:

this.router.navigateByUrl('grupo');

And I also keep the access_token and the expire_in in the localStorage . But if instead of logging in I just change the path in the url I can also login.

I need to add this security, that until you log in you cannot navigate to another tab in any case. But how would this be done?

This is the post method I have:

this.http.post(this.url,this.login,opciones)
.subscribe(
  data => {
    if(data){

    this.TOKEN = data["access_token"];
    this.EXPIRES = data["expires_in"];

    localStorage.setItem('TOKEN',this.TOKEN);
    localStorage.setItem('EXPIRE_IN', this.EXPIRES);

    this.router.navigateByUrl('grupo');

  }
},
  error => alert("Fallo de sesion")
)

And these are the options for the POST:

const opciones = {
  headers: new HttpHeaders({
    'Content-Type':'application/x-www-form-urlencoded',
    'Authorization': '--lo que sea--'
  }),
  params: parametros
};
angular

1 Answers

  1. Best Answer

    You have to implement a guardto decide if that route can be navigated to or not. Since you want to validate that the user is logged in before navigating to that route, you can create a guard for it.

    When you implement a guardin angular you have to implement the interface CanActivate. Then you define the guard on the route you want it to have guardand access to that route be controlled by it.

    Here is an example of how you could implement it.

    // este es un servicio bastante simple para que entiendas el concepto
// tu puedes implementarlo como mejor se adecue a tu caso
@Injectable({ providedIn: 'root' })
export class AuthService {
  get isLogged() {
    return localStorage.getItem('TOKEN') && localStorage.gettem('EXPIRE_IN');
  }
}

    authentication.guard.ts You can generate it with the following angular CLI command

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

    // este es el método que usará angular para permitir el acceso o no a la ruta.
    // tal como puedes ver en la declaración de este método, el return puede ser un boleano, observable, promesa o UrlTree
    // en este caso, es boleano
    // tienes que saber que este método se ejecutará siempre antes de activar la ruta
    // en el que esté definido
    // si devuelve true se permite el acceso de lo contrario no
    canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean | UrlTree | Observable<boolean | UrlTree> | Promise<boolean | UrlTree> {
        return this.auth.isLogged;
    }
}

    In your app.module.tsor another module you have you define the guard.

    @NgModule({
  imports: [
    RouterModule.forRoot([
      {
        path: 'grupo',
        component: GroupComponent,
        canActivate: [AuthenticationGuard]
      }
    ])
  ],
  providers: [AuthenticationGuard]
})
class AppModule {}

    Documentation about CanActivate .

    • 5