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

Question

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

Answer 1

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

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

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