Angular 项目如何进行权限控制

2023-10-23 09:06:56

前言

权限控制是 web 安全中至关重要的一环。在前端项目中，权限控制同样重要。Angular 项目也不例外。

在本文中，我们将介绍如何使用 Angular 来实现权限控制。我们主要使用 RolesService 和 UsersService 来管理角色和用户。然后，使用守卫来保护路由。

创建角色和用户服务

首先，我们需要创建一个 RolesService 和 UsersService 。这两个服务将用于管理角色和用户。

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

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

  private roles = [
    { id: 1, name: 'Admin' },
    { id: 2, name: 'Editor' },
    { id: 3, name: 'User' }
  ];

  getAllRoles(): Role[] {
    return this.roles;
  }

  getRoleById(id: number): Role | undefined {
    return this.roles.find(role => role.id === id);
  }
}

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

  private users = [
    { id: 1, name: 'John Doe', email: 'john.doe@example.com', role: 'Admin' },
    { id: 2, name: 'Jane Smith', email: 'jane.smith@example.com', role: 'Editor' },
    { id: 3, name: 'Michael Jones', email: 'michael.jones@example.com', role: 'User' }
  ];

  getAllUsers(): User[] {
    return this.users;
  }

  getUserById(id: number): User | undefined {
    return this.users.find(user => user.id === id);
  }
}

使用守卫来保护路由

Angular 中，可以使用守卫来保护路由。守卫可以用来验证用户是否拥有访问某个路由所需的权限。

import { Injectable } from '@angular/core';
import { ActivatedRouteSnapshot, CanActivate, RouterStateSnapshot, UrlTree } from '@angular/router';
import { Observable } from 'rxjs';
import { RolesService } from '../roles.service';
import { UsersService } from '../users.service';

@Injectable({
  providedIn: 'root'
})
export class AuthGuard implements CanActivate {

  constructor(
    private rolesService: RolesService,
    private usersService: UsersService
  ) { }

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

    const requiredRole = route.data['requiredRole'];
    const user = this.usersService.getCurrentUser();

    if (!user) {
      return false;
    }

    const userRole = this.rolesService.getRoleById(user.role);

    if (!userRole) {
      return false;
    }

    return userRole.name === requiredRole;
  }
}

使用 `RolesService` 和 `UsersService` 来管理角色和用户

我们可以使用 RolesService 和 UsersService 来管理角色和用户。我们可以使用 RolesService 来获取所有角色，也可以使用 UsersService 来获取所有用户。

import { Component, OnInit } from '@angular/core';
import { RolesService } from '../roles.service';
import { UsersService } from '../users.service';

@Component({
  selector: 'app-users',
  templateUrl: './users.component.html',
  styleUrls: ['./users.component.css']
})
export class UsersComponent implements OnInit {

  roles: Role[] = [];
  users: User[] = [];

  constructor(
    private rolesService: RolesService,
    private usersService: UsersService
  ) { }

  ngOnInit(): void {
    this.roles = this.rolesService.getAllRoles();
    this.users = this.usersService.getAllUsers();
  }
}

使用守卫来保护路由

我们可以使用守卫来保护路由。我们可以使用 AuthGuard 来验证用户是否拥有访问某个路由所需的权限。

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.css']
})
export class HomeComponent implements OnInit {

  constructor() { }

  ngOnInit(): void {
  }
}

import { Routes } from '@angular/router';

const routes: Routes = [
  { path: '', component: HomeComponent },
  { path: 'admin', component: AdminComponent, canActivate: [AuthGuard], data: { requiredRole: 'Admin' } },
  { path: 'editor', component: EditorComponent, canActivate: [AuthGuard], data: { requiredRole: 'Editor' } },
  { path: 'user', component: UserComponent, canActivate: [AuthGuard], data: { requiredRole: 'User' } },
  { path: '**', redirectTo: '' }
];