Question

我正在使用Angular

这是我的认证检查

export class EnsureAuthenticated implements CanActivate {
    constructor(private auth: AuthService, private router: Router) {}
    canActivate(): boolean {
        if (localStorage.getItem('token')) {
            return true;
        }
        else {
            this.router.navigateByUrl('/login');
            return false;
        }
    }
}


{ 
      path: 'path', 
      component: myComponent,
      canActivate: [EnsureAuthenticated]
    }

一切正常，我的问题是此页面可以同时访问用户和管理员

我知道我没有对此设置任何条件

如何设置适当的条件

我不想访问管理员页面

Answer 1

请参见stackblitz

中的示例

在您的app-routing.module.ts

const routes: Routes = [
   {
       path: "admin",
       component: AdminOnlyComponent,
       canActivate: [RoleGuardService],
       data: { roles: ['admin']}
   },
   ...
}

在您的RoleGuardService中

import { Injectable } from '@angular/core';
import { UserRolesService} from './user-roles.service';
import { Router, ActivatedRouteSnapshot } from '@angular/router';
@Injectable({
  providedIn: 'root'
})
export class RoleGuardService {

  constructor(private getUserRoles: UserRolesService) { }

  canActivate(route: ActivatedRouteSnapshot): boolean {
    return route.data.roles.some( ai => this.getUserRoles.getRoles().includes(ai) );
  }
}

在UserRolesService中

import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root'
})
export class UserRolesService {
   userRoles: string[] = [];

  constructor() { }

  setRoles(Roles: string[]){
    this.userRoles = Roles.slice(0);
  }

  getRoles(){
    return this.userRoles;
  }
}

在用户登录系统时设置角色，或从您的本地存储中获取这些角色。...

Answer 2

假定您具有检索已连接用户角色的服务，则仅需检查该角色并返回假（如果该用户是管理员）就可以防止该类型的用户访问您的页面。如果您存储在lcoal存储中的令牌是JWT令牌，则有时用户角色已编码到其中，则您必须对令牌进行解码以提取角色。

Answer 3

您应该创建一个RoleGuardService，它期望用户提供一个角色，并检查该角色是否与所期望的角色相等，如下所示：

  constructor(public auth: AuthService, public router: Router) {}

  canActivate(route: ActivatedRouteSnapshot): boolean {

    // this will be passed from the route config
    // on the data property
    const expectedRole = route.data.expectedRole;

    const token = localStorage.getItem('token');

    // decode the token to get its payload
    const tokenPayload = decode(token);

    if (
      !this.auth.isAuthenticated() || 
      tokenPayload.role !== expectedRole
    ) {
      this.router.navigate(['login']);
      return false;
    }
    return true;
  }

并通过用户角色防护来保护您的路由，例如：

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

此方案假设您在JWT中使用自定义角色声明，有关更多信息，我建议您阅读该文章，该文章可以完美地解释您的答案： https://medium.com/@ryanchenkie_40935/angular-authentication-using-route-guards-bf7a4ca13ae3

基于角色的角路由

3 个答案: