Angular JWT with few Roles acess

Question

I want to use several roles for accessing views in the application, if I use one role everything works correctly, however when I use several roles, the views do not give access

My model User have this:

export class User {
    role: Role[];                // I change - role: Role[] for few roles
    expiresIn: string;
    aud: string;
    iss: string;
    token?: string;
}

export const enum Role {
    Admin = 'admin',
    User = 'user',   
    Engineer = 'engineer'
}

my backend give my token with with roles:

//....
role: (2) ["admin", "engineer"]
token: "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ
//....

If I use this in login metod

tokenInfo['http://schemas.microsoft.com/ws/2008/06/identity/claims/role'][0]   - first element in array

i have only 1 role, and code work fine, but I can have many users who belong to different roles, and I need the application to give them access if there are at least 1 role

I handle token decoding and getting roles in authorization service

signin(username:string, password:string ) {
    return this.http.post<User>(`${environment.apiUrl}${environment.apiVersion}Profile/Login`, {username, password})    
    .pipe(map(user => {
    if (user && user.token) {
      let tokenInfo = this.getDecodedAccessToken(user.token); // decode token
      this.session = {
        token: user.token,
        role: tokenInfo['http://schemas.microsoft.com/ws/2008/06/identity/claims/role'],     - add this [0]
        expiresIn: tokenInfo.exp,
        aud: tokenInfo.aud,
        iss: tokenInfo.iss,            
      }
      localStorage.setItem('currentUser', JSON.stringify(this.session));
      this.currentUserSubject.next(this.session);         
    }
    return this.session;
    }))
}

sigin metod for example

Login() {
    this.auth.signin(this.signinForm.value.email, this.signinForm.value.password)
        .pipe(first())
        .subscribe(
            data => {
                console.log("User is logged in");
                this.router.navigate(['/dashboard']);
                this.loading = false;
            });
  }

Not sure if I correctly specify multiple access roles

//......
const adminRoutes: Routes = [
{
    path: 'dashboard',
    loadChildren: () => import('./views/dashboard/dashboard.module').then(m => m.DashboardModule),
    canActivate: [AuthGaurd],

},
{
    path: 'books',
    loadChildren: () => import('./views/books/books.module').then(m => m.BooksModule),
    canActivate: [AuthGaurd],
    data: { roles: [Role.Admin] }  <- work fine if 1 role
},
{
    path: 'person',
    loadChildren: () => import('./views/person/person.module').then(m => m.PersonModule),
    canActivate: [AuthGaurd],    
    data: { roles: [Role.Admin, Role.Engineer] }  <- if have 1 role - admin - open
 },
 {
    path: 'eqip',
    loadChildren: () => import('./views/eqip/eqip.module').then(m => m.PersonModule),
    canActivate: [AuthGaurd],    
    data: { roles: [Role.Engineer] }  <- not open becouse only admin role
 }];

const routes: Routes = [
{
    path: '',
    redirectTo: 'applayout-sidebar-compact/dashboard/v1',
    pathMatch: 'full',
},
...
{
    path: '**',
    redirectTo: 'others/404'
}];

@NgModule({
imports: [RouterModule.forRoot(routes, { useHash: true })],
exports: [RouterModule]
})
export class AppRoutingModule { }
//......

and guard sevice

  canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean {
const url: string = state.url;
const currentUser = this.auth.currentUserValue;    
// in auth.service.ts
// constructor(private http: HttpClient) {
//   this.currentUserSubject = new BehaviorSubject<User>(JSON.parse(localStorage.getItem('currentUser')));
//   this.currentUser = this.currentUserSubject.asObservable();

// }
// public get currentUserValue(): User {
//   return this.currentUserSubject.value;
// }
if (this.auth.isUserLoggedIn()) {


  // test code
  const ter = route.data.roles.includes(currentUser.role) <- Error now here
  console.log(ter)  



  // main check role code
  // if (route.data.roles && route.data.roles.indexOf(currentUser.role) === -1) {
  //   this.router.navigate(["/"]);
  //   return false;
  // }

  return true;

}
this.auth.setRedirectUrl(url);
this.router.navigate([this.auth.getLoginUrl()]);
return false;

}

token in localStorage:

aud: "Service"
expiresIn: 1591967261
iss: "USs"
role: ["admin", "engineer"]
token: "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJodHR....

change app-routing.module.ts

@NgModule({
imports: [RouterModule.forRoot(routes, { 
    useHash: true,
    initialNavigation: 'enabled',
    paramsInheritanceStrategy: 'always',
    relativeLinkResolution: 'corrected',
    scrollPositionRestoration: 'enabled',
})],
exports: [RouterModule]

Error

Uncaught (in promise): TypeError: Cannot read property 'includes' of undefined

TypeError: Cannot read property 'includes' of undefined

Please add your `AuthGuard` code. Also, what's `tokenInfo` look like? — benbotto, May 28 '20 at 16:52
Is you error occuring when navigating to dashboard specifically? — David, Jun 03 '20 at 13:02

Leon Radley · Answer 1 · 2020-06-02T11:39:24.333

4

It could also be that a typescript enum is not a string. so comparing a enum with a string will never be true.

What you need to use is a const enum because that compiles down to a string.

try changing to

export const enum Role {
    Admin = 'admin',
    User = 'user',   
    Engineer = 'engineer'
}

Though this does have other implications. https://www.typescriptlang.org/docs/handbook/enums.html#const-enums

and instead of doing a indexOf you can use .includes

route.data.roles.includes(currentUser.role)

Edit: It could also be that your data is not inherited down to where you are trying to get it.

You might need to add this to your Router config

RouterModule.forRoot([], {
      initialNavigation: 'enabled',
      paramsInheritanceStrategy: 'always', <-- this makes params and data accessible lower down into the tree
      relativeLinkResolution: 'corrected',
      scrollPositionRestoration: 'enabled',
    }),

edited Jun 02 '20 at 11:39

answered Jun 01 '20 at 17:51

Leon Radley

7,596
5
35
54

add 'const' and update import but still have a mistake 'Cannot read property 'indexOf' of undefined' if try check roles in guard if (route.data.roles.indexOf(currentUser.role) === -1) { console.log('not have roles) } – Ярослав Прохоров Jun 02 '20 at 08:05
I've added an example of using .includes instead, it is easier to understand than indexOf. But your problem with data.roles being undefined, is because you are not passing any roles in the route config? – Leon Radley Jun 02 '20 at 09:20
Cannot read property 'includes' of undefined now, in routing i have this - data: { roles: [Role.Engineer] } – Ярослав Прохоров Jun 02 '20 at 09:38
make sure route.data contains your info before trying to work with it. But it could also be that your data does not get inherited down. I've updated my answer with more info – Leon Radley Jun 02 '20 at 11:37

score 2 · Answer 2 · answered May 28 '20 at 16:56

This really depends on how you are handling your AuthGuard code. There is a comprehensive tutorial on how to set up your Authentication and Authorization in this guide: https://jasonwatmore.com/post/2018/11/22/angular-7-role-based-authorization-tutorial-with-example

Big area where you could be experiencing the issue is on your AuthGuard. You can have this example from the link I shared above:

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

import { AuthenticationService } from '@/_services';

@Injectable({ providedIn: 'root' })
export class AuthGuard implements CanActivate {
    constructor(
        private router: Router,
        private authenticationService: AuthenticationService
    ) {}

    canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) {
        const currentUser = this.authenticationService.currentUserValue;
        if (currentUser) {
            // check if route is restricted by role
            if (route.data.roles && route.data.roles.indexOf(currentUser.role) === -1) {
                // role not authorised so redirect to home page
                this.router.navigate(['/']);
                return false;
            }

            // authorised so return true
            return true;
        }

        // not logged in so redirect to login page with the return url
        this.router.navigate(['/login'], { queryParams: { returnUrl: state.url }});
        return false;
    }
}

You also need to make sure you are passing the right roles into your AuthGuard.

If you want deeper restrictions in the future, there's also this guide: How to prevent actions by user role in Angular

Hope this helps!

i use this exemple for create this guard – Ярослав Прохоров Jun 02 '20 at 08:05 — Ярослав Прохоров, Jun 02 '20 at 08:05

score 1 · Accepted Answer · edited Jun 04 '20 at 16:03

1

In your route config, there are some routes which don't need to check roles property in data. Assuming everybody should have access to them.

Change your auth guard to :-

canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean {
    const url: string = state.url;
    const currentUser = this.auth.currentUserValue;
    console.log(currentUser);
    if (this.auth.isUserLoggedIn()) {
      if (!route.data.roles || route.data.roles.length === 0) {
        return true;
      }
      if (typeof currentUser.role === 'string' && route.data.roles.includes(currentUser.role)) {
        return true;
      }
      if (Array.isArray(currentUser.role)) {
        for (let i = 0; i < currentUser.role.length; i++) {
          if (route.data.roles.includes(currentUser.role[i])) {
            return true;
          }
        }
      }
      this.router.navigate([this.auth.getLoginUrl()]); //TODO: Change to 403 PAGE (403 forbidden)
      return false;
    }
    this.auth.setRedirectUrl(url);
    this.router.navigate([this.auth.getLoginUrl()]);
    return false;
}

edited Jun 04 '20 at 16:03

Ярослав Прохоров

531
1
6
24

answered Jun 03 '20 at 12:10

Aakash Garg

10,649
2
7
25

what should return in that case, can you tell me. please what i have implemented is, if roles doesn't match redirect to login. – Aakash Garg Jun 04 '20 at 13:25
@ЯрославПрохоров please tell me what to do if roles doesn't match and i will change my code. – Aakash Garg Jun 04 '20 at 13:29
updated my code, check now. if it doesn't match let me know the expected behavior. – Aakash Garg Jun 04 '20 at 14:27
It always returns false, and in the last example, the application enters a loop and does not load at all – Ярослав Прохоров Jun 04 '20 at 15:22
@ЯрославПрохоров I have updated the answer. check updated one. please also tell what's printing in console for currentUser. I have inserted a console.log statement in guard for that. – Aakash Garg Jun 04 '20 at 15:29
u forget one simbol = } , maybe I'm adding it in the wrong place – Ярослав Прохоров Jun 04 '20 at 15:39
Now you can track the cycle of movement through the code -> true 1 and next -> auth.gaurd.ts:39 false 1 -> go to 404 page -> not-found.component.ts:14 snapshot.url : /others/404 – Ярослав Прохоров Jun 04 '20 at 15:49
@ЯрославПрохоров what do you mean? – Aakash Garg Jun 04 '20 at 15:50
the loop doesn't even go into array check – Ярослав Прохоров Jun 04 '20 at 15:52
@ЯрославПрохоров, fixed that above, try now. – Aakash Garg Jun 04 '20 at 15:52
I put the code in order, the code works in the right direction, when checking another role, it throws as if there is no access. Good work – Ярослав Прохоров Jun 04 '20 at 16:05
Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/215320/discussion-between-aakash-garg-and--). – Aakash Garg Jun 04 '20 at 16:05

Angular JWT with few Roles acess

3 Answers3