基于角度角色的菜单和页面路由答案

【问题标题】：Angular Role Based Menu And Page Routing基于角度角色的菜单和页面路由
【发布时间】：2023-03-30 15:57:01
【问题描述】：

我有 3 个角色。管理员、客户和员工。例如，当用户名：aa@hotmail.com 和密码：123 角色：[admin,customer] 登录我的站点时，他应该会在菜单中看到（主页、客户和业务）页面。当另一个具有客户角色的用户登录时，他们应该会看到 (Home,Customers) 页面。总而言之，如何进行基于角色的菜单管理？你能举个例子或帮助吗？

【问题讨论】：

在路由到另一个组件时添加对角色的严格检查。并使用*ng-If根据角色显示/隐藏菜单。
如上一篇文章所述，您将使用某种AuthService 来设置用户的当前角色。然后，通过使用 getter，您检查当前用户是否具有这个或那个角色，如果是，则向他们显示子菜单（即使用ngIf）。此外，您将使用警卫（请参阅angular.io/api/router/CanActivate）进一步检查是否可以导航到某个特定组件。

标签： angular menu roles

【解决方案1】：

您可以使用includes 轻松检查当前用户在他的roles 变量中是否具有特定角色（假设roles 变量是一个数组）。然后在您的模板上使用*ngIf，您可以启用或不启用菜单上的页面。

Here 是一个带有小例子的堆栈闪电战。

此外，请务必在您的路线上使用canActivate interface，以避免在没有管理员帐户的情况下访问任何管理员页面。

【讨论】：