Angular 基于角色的菜单和页面路由

Question

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

Answer 1

通过includes（假设roles变量是一个数组）可以很方便的查看当前用户在他的roles变量中是否有某个角色。然后在您的模板上使用 *ngIf，您可以启用或禁用菜单上的页面。

Here 是一个带有小例子的 stackblitz。

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