Is there a way to retrieve the user role from the token?
I've managed to fetch the token using the decoding feature of angular2-jwt, but when I try to apply it for accessing the admin route, it returns a value of false.
Upon checking with console.log(tokenPayLoad), I can see that the token is successfully decoded.
https://i.stack.imgur.com/llBT7.png
Additionally, in the Chrome DevTools' Application view, I can verify that the user is stored in localStorage.
https://i.stack.imgur.com/cCtgK.png
This is how I declared my routes:
{
path: 'dashboard',
component: DashboardComponent,
canActivate: [RoleGuard],
data: {expectedRole: 'admin'}
},
And here's my implementation of the role-guard.service.ts:
import { Injectable } from '@angular/core';
import { Router, CanActivate, ActivatedRouteSnapshot } from "@angular/router";
import { JwtHelperService } from "@auth0/angular-jwt";
import { AuthService } from '../user/auth.service';
@Injectable({
providedIn: 'root'
})
export class RoleGuardService implements CanActivate {
jwtHelper = new JwtHelperService()
constructor(
public auth: AuthService,
public router: Router
) { }
canActivate(route: ActivatedRouteSnapshot): boolean {
const expectedRole = route.data.expectedRole;
const token = localStorage.getItem('token')
const tokenPayLoad = this.jwtHelper.decodeToken(token)
if (!this.auth.isAuthenticated() || tokenPayLoad.role !== expectedRole) {
console.log(tokenPayLoad)
this.router.navigate(['/'])
window.alert('You do not have permission to access this route.')
return false
}
return true
}
}