Angular中的路由守卫如何使用以实现导航控制和权限检查

在Angular中，路由守卫是一个用于控制导航的机制，可以用来实现导航控制和权限检查。路由守卫可以在路由的不同阶段进行拦截和处理，包括 canActivate、canActivateChild、canDeactivate、canLoad等。

下面是一个简单的示例，演示如何使用路由守卫实现权限检查和导航控制：

1. 创建一个AuthGuard服务，实现CanActivate接口来进行权限检查：

import { Injectable } from '@angular/core';
import { CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot, Router } from '@angular/router';

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

  canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean {
    // 在这里进行权限检查逻辑，返回true或false
    if (hasPermission) {
      return true;
    } else {
      this.router.navigate(['/login']);
      return false;
    }
  }
}

2. 在路由模块中配置路由守卫：

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { HomeComponent } from './home.component';
import { LoginComponent } from './login.component';
import { AuthGuard } from './auth.guard';

const routes: Routes = [
  { path: '', component: HomeComponent, canActivate: [AuthGuard] },
  { path: 'login', component: LoginComponent }
];

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

在上面的示例中，当用户访问根路径时会触发AuthGuard进行权限检查，如果用户没有权限，则会重定向到登录页面。AuthGuard类中的hasPermission可以是根据用户角色或其他条件来判断用户是否有权限访问某个路由。

通过配置路由守卫来实现权限检查和导航控制，可以有效地保护应用程序中的敏感内容并控制用户的访问权限。