Angular中的路由守卫(Route Guard)与权限控制

在Angular中，路由守卫(Route Guards)是一种用于保护导航的机制。它们允许我们在路由导航发生之前进行检查和控制，以决定是否允许用户访问某个特定的路由。通过结合权限控制，我们可以实现更高级的权限管理和访问控制。

1. 路由守卫的类型

在Angular中，有四种不同类型的路由守卫：

(1) CanActivate

CanActivate守卫用于检查用户是否有权访问特定路由。它们可以用于验证用户登录状态、角色权限等。如果守卫返回true，则路由导航继续进行；如果返回false，路由导航将被取消。

(2) CanActivateChild

与CanActivate类似，CanActivateChild守卫用于检查用户是否有权访问子路由。它们可以用于对特定路由的子路由进行权限控制。

(3) CanDeactivate

CanDeactivate守卫用于在用户离开当前路由之前进行检查和确认。例如，可以使用CanDeactivate守卫来提示用户是否要保存对表单所做的更改。

(4) Resolve

Resolve守卫用于在路由导航之前获取预加载的数据。它们可以用于在加载某个路由之前获取必要的数据，并传递给组件进行显示。

2. 权限控制

结合路由守卫，我们可以实现更复杂的权限控制逻辑。以下是一个简单的例子来说明如何在Angular中进行权限控制：

(1) 创建一个AuthGuard服务

@Injectable()
export class AuthGuard implements CanActivate {
  constructor(private authService: AuthService, private router: Router) {}

  canActivate(
    route: ActivatedRouteSnapshot,
    state: RouterStateSnapshot
  ): Observable<boolean> | Promise<boolean> | boolean {
    if (this.authService.isLoggedIn()) {
      // 用户已登录，允许访问
      return true;
    }

    // 用户未登录，重定向到登录页面
    this.router.navigate(['/login']);
    return false;
  }
}

(2) 在路由配置中使用AuthGuard

const routes: Routes = [
  { path: '', redirectTo: '/dashboard', pathMatch: 'full' },
  { path: 'dashboard', component: DashboardComponent, canActivate: [AuthGuard] },
  { path: 'profile', component: ProfileComponent, canActivate: [AuthGuard] },
  { path: 'admin', component: AdminComponent, canActivate: [AuthGuard], data: { roles: ['admin'] } },
  { path: '**', component: NotFoundComponent }
];

在上述代码中，AuthGuard服务用于检查用户是否已登录。如果用户未登录，则重定向到登录页面。这样，只有经过AuthGuard守卫的路由才能被访问。

(3) 在组件中访问路由守卫传递的数据

export class AdminComponent implements OnInit {
  isAdmin: boolean;

  constructor(private route: ActivatedRoute) {}

  ngOnInit() {
    this.isAdmin = this.route.snapshot.data.roles.includes('admin');
  }
}

在上述代码中，AdminComponent组件使用了resolve守卫传递的数据来确定用户是否具有'admin'角色。根据具体的需求，我们可以根据不同的角色显示不同的页面内容。

通过以上步骤，我们可以实现基于路由守卫的权限控制，确保只有经过认证和授权的用户才能访问特定的页面。

总结

路由守卫(Route Guards)在Angular中扮演了重要的角色，它们可以在用户导航到特定路由之前进行检查和控制。结合权限控制，我们可以实现更高级的权限管理和访问控制。在实际应用中，可以根据具体的需求，定制和使用不同类型的路由守卫来满足业务需求。

本文来自极简博客，作者：码农日志，转载请注明原文链接：Angular中的路由守卫(Route Guard)与权限控制