Angular2 中基于角色的访问控制

当开发 Angular2 应用程序时，实现基于角色的访问控制是确保系统安全性和数据保护的重要步骤之一。通过角色控制访问权限，您可以确保用户只能访问其授权的功能和信息。在 Angular2 中，您可以借助路由守卫（Route Guards）和角色服务（Role Service）来实现这一目标。

typescript
// role.guard.ts
import { Injectable } from '@angular/core';
import { CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot, Router } from '@angular/router';
import { AuthService } from './auth.service';
@Injectable({
  providedIn: 'root'
})
export class RoleGuard implements CanActivate {
  constructor(private authService: AuthService, private router: Router) {}
  canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean {
    const expectedRole = route.data.expectedRole;
    
    if (!this.authService.isLoggedIn() || this.authService.getUserRole() !== expectedRole) {
      this.router.navigate(['/unauthorized']); // Redirect to unauthorized page if role doesn't match
      return false;
    }
    
    return true;
  }
}

typescript
// app-routing.module.ts
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { HomeComponent } from './home.component';
import { AdminComponent } from './admin.component';
import { RoleGuard } from './role.guard';
const routes: Routes = [
  { path: 'home', component: HomeComponent },
  { 
    path: 'admin',
    component: AdminComponent,
    canActivate: [RoleGuard],
    data: {
      expectedRole: 'admin' // Specify the expected role for accessing this route
    }
  },
  { path: 'unauthorized', component: UnauthorizedComponent },
  { path: '', redirectTo: '/home' } // Redirect to home for any other route
];
@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }