Angular routing change in url

Question

I am making angular 7 application where i am making redirection via router and auth guard..

Html:

https://stackblitz.com/edit/angular-6-jwt-authentication-example-tsu2sm?file=app%2Fhome%2Fhome.component.html

<p *ngIf="showUserRoute">
  <a [routerLink]="['/user']">User</a>
</p>
<p><a [routerLink]="['/login']">Logout</a></p>

Here you could able to see a ngIf,

<p *ngIf="showUserRoute">
  <a [routerLink]="['/user']">User</a>
</p>

For which the ts:

https://stackblitz.com/edit/angular-6-jwt-authentication-example-tsu2sm?file=app%2Fhome%2Fhome.component.ts

ngOnInit() {

let user = JSON.parse(localStorage.getItem('currentUser'));

 console.log(user.token);

 if(user.token == "fake-jwt-token") {
   this.showUserRoute = false;
 }

}

Here if user.token == "fake-jwt-token" then i should not allow the user to navigate to user url..

It hides the url now, No issue regarding it..

The issue is even though <a [routerLink]="['/user']">User</a> kept in hidden, an user can change the url manually so if he makes the url like,

Adding user at last in url

https://angular-6-jwt-authentication-example-tsu2sm.stackblitz.io/user, it is redirecting to user page..

My requirement is if the user changes the url like the above, it should not be allowed and the redirection needs to happen to previous state..

You can explore working stackblitz https://stackblitz.com/edit/angular-6-jwt-authentication-example-tsu2sm

and you can get what i am in the need..

In the stackblitz if you give https://angular-6-jwt-authentication-example-tsu2sm.stackblitz.io/user then it will redirect to user component, but whereas our home page has a condition if the logged in user has "fake-jwt-token" then the user is strictly not allowed to access the user url and component..

Edit

I am not asking to prevent from login, the user can logged in and can taken to home component but if the user has fake-jwt-token, then he was not allowed to go to /user url alone but he can access other page..

User having fake-jwt-token can logged in successfully but need protected from going into https://angular-6-jwt-authentication-example-tsu2sm.stackblitz.io/user

Step 1:

User can login using test and test as username and password

Step 2:

After giving the credentials user will be redirected to home component.

Step 3: Now the logged in user has fake-jwt-token so after logged in restrict him from accessing user component so if he gives url like this from home component https://angular-6-jwt-authentication-example-tsu2sm.stackblitz.io/user , then redirect back to home component..

Kindly help me to block the user being enter into user route url with "fake-jwt-token"..

You mean changing the route url directly after you have logged In once? It works fine if you haven't logged In. — Ashish Ranjan
– Ashish Ranjan, Commented Dec 10, 2018 at 19:03
@xyz, As of logged in no issues but after logged in if the tokenis fake jwt token then user was not allowed to access the user component and so he cannot move to users url by directly.. — Maniraj Murugan
– Maniraj Murugan, Commented Dec 10, 2018 at 19:08
Then why miss applying condition you applied in your Home Component in your Auth Guard :D — Ashish Ranjan
– Ashish Ranjan, Commented Dec 10, 2018 at 19:10
@xyz, Sorry i am unable to get you.. I am new in angular and so i am unable to block the users from such redirection even after logged in based on fake jwt token.. And hence asked for help please help me with the same stackblitz i have provided for my better understanding.. — Maniraj Murugan
– Maniraj Murugan, Commented Dec 10, 2018 at 19:13

Ashish Ranjan · Accepted Answer · 2018-12-10 19:41:52Z

1

Modify your Auth Guard with the same condition you have in your Home Component.

canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) {
    let currentUser = localStorage.getItem('currentUser') ? JSON.parse(localStorage.getItem('currentUser')): null;
    if (currentUser && currentUser.token != "fake-jwt-token") {
        // logged in and doesn't have fake token
        return true;
    }
    // not logged in so redirect to login page with the return url
    this.router.navigate(['/login'], { queryParams: { returnUrl: state.url }});
    return false;
}

A simple and clean way to achieve this would be to have seperate guard for HomeComnponent.

@Injectable({ providedIn: 'root' })
export class HomeGuard implements CanActivate {
  canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) {
      let currentUser = localStorage.getItem('currentUser');
        if (currentUser) {
            // logged in so return true
            return true;
        }
        return false;
    }
}

And have your routes like:

const appRoutes: Routes = [
    { path: '', component: HomeComponent, canActivate: [HomeGuard] },
    { path: 'login', component: LoginComponent },
    { path: 'user', component: UserComponent, canActivate: [AuthGuard] },
    // otherwise redirect to home
    { path: '**', redirectTo: '' }
];

See an example here: https://stackblitz.com/edit/angular-6-jwt-authentication-example-42ft5j?file=app%2F_guards%2Fhome.guard.ts

edited Dec 10, 2018 at 19:41

answered Dec 10, 2018 at 19:06

Ashish Ranjan

13k5 gold badges32 silver badges53 bronze badges

Sign up to request clarification or add additional context in comments.

15 Comments

Ashish Ranjan Over a year ago

@undefined: Can check here: stackblitz.com/edit/…

Maniraj Murugan Over a year ago

If i give test and test in login username and password respectively, it was not redirecting home component.. Kindly recheck the stackblitz..

Ashish Ranjan Over a year ago

@undefined: You are correct, it should not. Because that user has fake-jwt-token

Maniraj Murugan Over a year ago

I am not sure whether i have explained clearly.. User can login and can go to home component but he cannot go to user component alone if he has fake-jwt-token but he can go everywhere after logged in..

Maniraj Murugan Over a year ago

Only users router link was restricted for the user having fake-jwt-token but he can succefully loggedin and can taken to home page.. No issues in it..

|

SiddAjmera · Accepted Answer · 2018-12-10 20:10:32Z

1

You should have made the change in your AuthGuard as your '' and 'user' routes are already protected by it.

Change your implementation of the AuthGuard to the following:

import { Injectable } from '@angular/core';
import { Router, CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router';

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

  constructor(private router: Router) { }

  canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) {
    const userFromStorage = localStorage.getItem('currentUser');
    let currentUser = userFromStorage ? JSON.parse(userFromStorage) : null;
    if (currentUser) {
      if(currentUser.token !== "fake-jwt-token" || route.component.name !== 'UserComponent') {
        return true;
      } else {
        this.router.navigate(['/']);
        return true;
      }
    }
    this.router.navigate(['/login'], { queryParams: { returnUrl: state.url } });
    return false;
  }
}

Here's a Working Sample StackBlitz for your ref.

edited Dec 10, 2018 at 20:10

answered Dec 10, 2018 at 19:05

SiddAjmera

39.6k7 gold badges77 silver badges113 bronze badges

18 Comments

Maniraj Murugan Over a year ago

Redirection to home component not happening after loggedin.. It was showing loading for long time and nothing happens.. Can you check for it please??

Maniraj Murugan Over a year ago

Thanks fpr your solution kindly read my edited question.. User can logged in but he should not allow to access only /user router link if he has fake-jwt-token..

SiddAjmera Over a year ago

Yeah. Because you have the AuthGuard configured on only the '' and the '/user' paths.

Maniraj Murugan Over a year ago

How can i change that as per my requirement.. I think i have given the requirement little clear now.. User can logged in and can go to home page but he cannot acces the user routerlink alone.. Please help me to achieve the result..

Maniraj Murugan Over a year ago

In simple after logged in if the user changes the url like https://angular-6-jwt-authentication-example-tsu2sm.stackblitz.io/user, then it should not take to user component rather it can taken to home component itself because user has fake-jwt-token..

|

Collectives™ on Stack Overflow

Angular routing change in url

2 Answers 2

15 Comments

18 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

15 Comments

18 Comments

Your Answer

Sign up or log in

Post as a guest

Related