Angular14 中基于角色的菜单项和路由？

Question

. Answers to this question are eligible for a +50 reputation bounty. its me is looking for a .

I have an Angular(angular 14) App. below is my Header with Register, Login, Add New Employee, List of employees, update employee profile, employee profile, working hours, logout menu.

If the user logs into my site and user have an Admin role, the user should see below menu items in the header.

1. Login
2. Register
3. Add New Employees,
4. update employee profile
5. List of employees,
6. logout

When a user logs into my site with the employee role, the user should see below menu items in the header.

1. Login
2. employee profile,
3. working hours,
4. logout

When the user logs into my site with the support role, the user should see below menu items in the header.

1. Login
2. List of employee
3. logout

How can I do a role-based menu? Could someone help me with this?

My app.component.html

<div>
  <nav class="navbar navbar-expand navbar-dark bg-dark">
    <a href="#" class="navbar-brand">Dashboard</a>
    <div class="navbar-nav mr-auto">
      <li class="nav-item">
        <a routerLink="register" class="nav-link">Register</a>
      </li>
      <li class="nav-item">
        <a routerLink="login" class="nav-link">Login</a>
      </li>
      <li class="nav-item">
        <a routerLink="" class="nav-link">Add New Employee</a>
      </li>
      <li class="nav-item">
        <a routerLink="" class="nav-link">List of employee</a>
      </li>
      <li class="nav-item">
        <a routerLink="" class="nav-link">Update employee profile</a>
      </li>
      <li class="nav-item">
        <a routerLink="" class="nav-link">employee profile</a>
      </li>
      <li class="nav-item">
        <a routerLink="" class="nav-link">working hours</a>
      </li>
      <li class="nav-item">
        <a routerLink="" class="nav-link">Logout</a>
      </li>
    </div>
  </nav>

  <div class="container mt-3">
    <router-outlet></router-outlet>
  </div>
</div>

app.component.ts

Folder structure

Below is my login-user.component.ts

import { Component } from '@angular/core';
import { User } from 'src/app/models/user.model';
import { UserService } from 'src/app/services/user.service';

@Component({
  selector: 'app-login-user',
  templateUrl: './login-user.component.html',
  styleUrls: ['./login-user.component.css']
})
export class LoginUserComponent {

  user: User = {
    username: '',
    password:''
  };
  submitted = false;

  constructor(private userService: UserService) { }

  loginUser(): void {
    const data = {
      username: this.user.username,
      password:this.user.password
    };

    this.userService.login(data)
      .subscribe({
        next: (res) => {
          console.log(res);
          this.submitted = true;
        },
        error: (e) => console.error(e)
      });
  }

  newUser(): void {
    this.submitted = false;
    this.user = {
      username: '',
      password:''
    };
  }

}

enter code here

my user.service.ts

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';
import { User } from '../models/user.model';

const baseUrl = 'http://localhost:8080/api/user';

@Injectable({
  providedIn: 'root'
})
export class UserService {

  constructor(private http: HttpClient) { }

  signup(data: any): Observable<any> {
    return this.http.post(baseUrl+"/signup", data);
  }

  login(data: any): Observable<any> {
    return this.http.post(baseUrl+"/login", data);
  }

  getAll(): Observable<User[]> {
    return this.http.get<User[]>(baseUrl);
  }

  get(id: any): Observable<User> {
    return this.http.get<User>(`${baseUrl}/${id}`);
  }

  create(data: any): Observable<any> {
    return this.http.post(baseUrl, data);
  }

  update(id: any, data: any): Observable<any> {
    return this.http.put(`${baseUrl}/${id}`, data);
  }

  delete(id: any): Observable<any> {
    return this.http.delete(`${baseUrl}/${id}`);
  }

  deleteAll(): Observable<any> {
    return this.http.delete(baseUrl);
  }

  findByTitle(name: any): Observable<User[]> {
    return this.http.get<User[]>(`${baseUrl}?name=${name}`);
  }
}

My app-routing.module.ts

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { RegisterUserComponent } from './components/user/register_user/register-user.component';
import { LoginUserComponent } from './components/user/login_user/login-user.component';
import { AddEmployeeComponent } from './components/employee/add-employee/add-employee.component';
import { UpdateEmployeeComponent } from './components/employee/update-employee/update-employee.component';
import { EmployeeListComponent } from './components/employee/list-employee/employee-list.component';
import { EmployeeDetailsComponent } from './components/employee/employee-profile/employee-profile.component';
import { EmployeeWorkingHoursComponent } from './components/employee/employee-workingHours/employee-workingHours.component';


import { HomeComponent } from './components/home/home.component';

const routes: Routes = [
  { path: '', redirectTo: 'home', pathMatch: 'full' },
  { path: 'home', component: HomeComponent },
  { path: 'register', component: RegisterUserComponent },
  { path: 'login', component: LoginUserComponent },
  { path: 'addEmployee', component: AddCameraComponent },
  { path: 'updateEmployee/:id', component: UpdateEmployeeComponent },
  { path: 'listAllEmployee', component: EmployeeListComponent },
  { path: 'employeeDetails/:id', component:EmployeeDetailsComponent},
  { path: 'employeeWorkingHours/:id', component:EmployeeWorkingHoursComponent}
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

I have checked below but I'm not sure how to do this also new to angular14,please advise here

Angular Role Based Menu And Page Routing

Answer 1

It's not an ideal way to show the menus from Client side. You should get the menu from server side.

If you forced to do this then maintain and array and iterate it by checking the roles

Answer 2

So do a role based menu, you can create a component for each role then used nested ifs to direct those users to that particular component based on the role the user has when logging. Also, you will need to make use of role guards. See code below.

 if (this.currentUserDetails.roles == "ADMIN") {
      this.router.navigate(["/admin",])
      this.toastr.success('You Have Successfully Logged In', username);
    }
    else

      if (this.currentUserDetails.roles == "EMPLOYEE") {
        this.router.navigate(["/employee",])
        this.toastr.success('You Have Successfully Logged In', username);
      }
      else

        if (this.currentUserDetails.roles == "SUPPORT") {
          this.router.navigate(["/support",])
          this.toastr.success('You Have Successfully Logged In', username);
        }
  },

I am using JWT in to get where the role is stored for each user. so this is my role guard. you can use it as a guide

checkUserLogin(route: ActivatedRouteSnapshot, url: any): boolean {
if (this.tokenStorageService.isUserLoggedIn()) {
  const userRole = this.tokenStorageService.getRole();
  if (route.data['role'] && route.data['role'].indexOf(userRole) === -1) {
    this.router.navigate(['/home']);
    window.alert("You don't have permission to view this page")
    return false;
  }
  return true;
}
return true;

}

The next thing you do is go in your app-routing.module.ts file and add the following to each of your components that should have the role needed to access that component

canActivate: [RoleGuard],
    data: {
      role: 'ADMIN'
    },

You will then need to create a enum for the above code and import it in the app-routing.module.ts file

export enum Role {
ADMIN = 'ADMIN',
EMPLOYEE = 'EMPLOYEE',
SUPPORT = 'SUPPORT',
}

Answer 3

You could put fields in the user table in your DB with the various permissions (or the various roles), so when the user logs in it returns them to you, after which you can check with if on each menu item whether the currently logged-in user has permission to see that item and then set up guards to protect your routes for non-logged in users with the correct permissions.

Answer 4

In case of using different levels of security, what I recommend is that you use GUARDS and make a routing based on it

interface CanActivate { canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<boolean | UrlTree> | Promise<boolean | UrlTree> | boolean | UrlTree }

Answer 5

Well, nice question. Authorization setup always requires lots of work on different layers of application and is not a trivial issue.

As a simplest solution for an angular app (or any other SPA technology), you could do following:

1 Create some service, which performs actual validation of credentials user enters on UI (you already did that). For my POC I've created one:

import { Observable, of } from 'rxjs';

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

@Injectable({
    providedIn: 'root',
})
export class UserService {
    quickLogin(roles: UserRole[]): Observable<User> {
        // should be a back-end call here, for testing purposes stubbed that part
        return of({
            name: 'test_user___' + roles.join(','),
            roles: [...roles],
        });
    }
}

export interface User {
    name: string;
    roles: UserRole[];
}

export type UserRole = 'support' | 'admin' | 'employee';

2 Implement some front-end storage for current user data (user properties / permissions / tokes / etc...)

import { User, UserRole } from './user.service';

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

@Injectable({
    providedIn: 'root',
})
export class AuthStorageService {
    current: User | null = null;

    constructor() {
        const authPersisted = localStorage.getItem('auth');
        if (authPersisted) {
            this.current = JSON.parse(authPersisted);
        }
    }

    login(user: User) {
        localStorage.setItem('auth', JSON.stringify(user));
        this.current = user;
    }

    logout() {
        localStorage.removeItem('auth');
        this.current = null;
    }

    hasRole(role: UserRole) {
        return this.current && this.current.roles.indexOf(role) !== -1;
    }
}

3 Implement some front-end component,usually it contains a form which, when submitted, deals with back-end using previously implemented service and persists user data in storage we've created

import { UserRole, UserService } from 'src/app/providers/user.service';

import { AuthStorageService } from 'src/app/providers/auth-storage.service';
import { Component } from '@angular/core';

@Component({
    selector: 'app-quick-login',
    templateUrl: './quick-login.component.html',
    styleUrls: ['./quick-login.component.scss'],
})
export class QuickLoginComponent {
    constructor(
        public auth: AuthStorageService,
        private userService: UserService
    ) {}

    signIn(roles: UserRole[]) {
        this.userService
            .quickLogin(roles)
            .subscribe((user) => this.auth.login(user));
    }

    signOut() {
        this.auth.logout();
    }
}

<span *ngIf="auth.current">{{ auth.current.name }}</span>
<button (click)="signIn(['support'])">sign-in support</button>
<button (click)="signIn(['admin'])">sign-in admin</button>
<button (click)="signIn(['employee'])">sign-in employee</button>
<button (click)="signOut()">sign out</button>

4 Now, whenever-wherever needed, we could check current user information using auth-storage service, for example:

import { AuthStorageService } from './providers/auth-storage.service';
import { Component } from '@angular/core';

@Component({
    selector: 'app-root',
    template: ` <header>
            <nav>
                <a routerLink="/">home</a>
                <a routerLink="/login">login</a>
                <a
                    routerLink="/employee"
                    *ngIf="auth.hasRole('support') || auth.hasRole('admin')"
                >
                    employee
                </a>
                <a
                    routerLink="/hours"
                    *ngIf="auth.hasRole('employee') || auth.hasRole('admin')"
                >
                    hours
                </a>
            </nav>
            <app-quick-login></app-quick-login>
        </header>
        <main><router-outlet></router-outlet></main>`,
})
export class AppComponent {
    constructor(public auth: AuthStorageService) {}
}

Of course, that's just a very very "lightweight" implementation, notready for production:( It just displays how to log in user, how to persist user data and how to apply this data in other parts of application

What else missing here?

1 Definitely your angular routes have to be protected using some route guards, auto-redirecting user to login page (or somewhere else) when user has no permissions to access current url

https://angular.io/api/router/CanActivate

2 Nice-to-have thing is http interceptor which, whenever 401 http response arrives, acts in the same manner as route guard + usually displays some "unauthorized toast message"

https://angular.io/api/common/http/HttpInterceptor

3 code responsible for checking permissions in angular templates better to incapsulate in, fe, some structural directive, so it could look like following:

import { Directive, Input, TemplateRef, ViewContainerRef } from '@angular/core';

import { AuthStorageService } from '../providers/auth-storage.service';
import { Subscription } from 'rxjs';
import { UserRole } from '../providers/user.service';

// https://angular.io/guide/structural-directives
@Directive({
    selector: '[requireAuth]',
})
export class RequireAuthDirective {
    private hasView = false;
    private authWatcher?: Subscription;

    private _rolesRequired: UserRole[] = [];

    @Input() set requireAuth(roles: UserRole[]) {
        this._rolesRequired = roles;
        this.checkConditions();
    }

    constructor(
        private auth: AuthStorageService,
        private templateRef: TemplateRef<any>,
        private viewContainer: ViewContainerRef
    ) {}

    ngOnInit() {
        this.authWatcher = this.auth.changed.subscribe(() =>
            this.checkConditions()
        );
    }

    ngOnDestroy() {
        this?.authWatcher?.unsubscribe();
    }

    private checkConditions() {
        const authConditionsMet =
            !!this.auth.current &&
            !!this._rolesRequired.find((r) => this.auth.hasRole(r));

        if (authConditionsMet && !this.hasView) {
            this.viewContainer.createEmbeddedView(this.templateRef);
            this.hasView = true;
        } else if (!authConditionsMet && this.hasView) {
            this.viewContainer.clear();
            this.hasView = false;
        }
    }
}

and it's usage:

<a routerLink="/employee" *requireAuth="['support', 'admin']">
    employee
</a>
<a routerLink="/hours" *requireAuth="['employee', 'admin']">
    hours
</a>

Then you do not need to inject auth-storage service application-wide to apply some visibiltiy conditions in component templates