首页 > 解决方案 > 如何用 Angular 6 做 RoleGuard?

问题描述

如何从令牌中获取用户角色?

我使用 decode 带来了令牌,angular2-jwt但是当我想放一个

CanAccess 管理路由它向我发送了一个false

当我这样做时,console.log(tokenPayLoad)它会给我带来解码的令牌

在此处输入图像描述

在 Chrome DevTools 的Apshowsation视图中,它在 localStorage 中显示用户

在此处输入图像描述

这是我的路线声明

  { 
    path: 'dashboard',
    component: DashboardComponent, 
    canActivate: [RoleGuard], 
    data: {expectedRole: 'admin'} 
  },

这是我的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('No tienes permisos para acceder a esta ruta.')
      return false
    }
    return true
  }
}

标签: angular

解决方案


感谢 user184994 的帮助,我看到我忘记将角色保存到令牌中

所以我将角色放入令牌中

const token = jwt.sign({ userId: user._id, role: user.role }...

推荐阅读