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

Question

I have 3 roles. Admin, Customer, and Employee. For example, when someone with username: aa@hotmail.com and password: 123 roles:[admin,customer] logs into my site, he should see (Home,Customers and business) pages in the menu. When another user with the customer role logs in, they should see (Home,Customers) pages. To summarize, how can I do role-based menu management? Can you give an example or help?

Answer 1

You can easily check if the current user has a certain role in his roles variable by using includes (assuming the roles variable is an array). Then using *ngIf on your template you can enable or not the pages on your menu.

Here is a stackblitz with a little example.

Moreover, be sure to use canActivate interface on your routes to avoid any possibility to go to any admin page without admin account.