Angular 4路由守卫：相对目标路由调用router.navigate()与权限控制

一、基于用户权限控制特定路由访问 #

要实现路由权限控制，Angular的CanActivate守卫是最适合的工具——它能在路由激活前拦截请求并校验用户权限。下面是具体的落地步骤：

1. 先搭建权限校验服务 #

首先需要一个服务来管理用户权限，比如AuthService，用来判断当前用户是否拥有目标路由的访问权限：

import { Injectable } from '@angular/core';
import { Observable, of } from 'rxjs';

@Injectable({ providedIn: 'root' })
export class AuthService {
  // 模拟用户权限列表，实际项目中可从后端接口获取
  private userPermissions = ['home', 'product/categoryB'];

  hasPermission(routePath: string): Observable<boolean> {
    return of(this.userPermissions.includes(routePath));
  }
}

2. 实现路由权限守卫 #

创建RoutePermissionGuard，注入AuthService和Router，实现CanActivate接口完成权限校验逻辑：

import { Injectable } from '@angular/core';
import { CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot, Router } from '@angular/router';
import { AuthService } from './auth.service';
import { Observable } from 'rxjs';
import { map } from 'rxjs/operators';

@Injectable({ providedIn: 'root' })
export class RoutePermissionGuard implements CanActivate {
  constructor(private authService: AuthService, private router: Router) {}

  canActivate(
    route: ActivatedRouteSnapshot,
    state: RouterStateSnapshot
  ): Observable<boolean> | Promise<boolean> | boolean {
    // 提取当前要访问的路由路径，适配你的路由结构
    const targetPath = state.url.split('/').slice(2).join('/');

    return this.authService.hasPermission(targetPath).pipe(
      map(hasPermission => {
        if (hasPermission) {
          return true; // 有权限，允许进入目标路由
        } else {
          // 无权限时导航到默认页面，比如home
          this.router.navigate(['/myApp/home']);
          return false;
        }
      })
    );
  }
}

3. 给目标路由绑定守卫 #

把守卫绑定到需要权限控制的路由上，比如你提供的categoryA路由：

const routes: Routes = [
  { path: '', redirectTo: '/myApp/home(secondary:xyz)', pathMatch: 'full' },
  { path: 'myApp', children: [
    { path: '', redirectTo: 'home', pathMatch: 'full' },
    { path: 'home', component: HomeComponent },
    { path: 'product', children: [
      { path: '', redirectTo: 'categoryA', pathMatch: 'full' },
      // 给categoryA路由添加权限守卫
      { path: 'categoryA', component: CategoryAComponent, canActivate: [RoutePermissionGuard] }
    ] }
  ] }
];

二、路由守卫中相对目标路由调用router.navigate() #

在路由守卫里实现相对导航的核心是利用ActivatedRouteSnapshot的relativeTo配置，它能让你基于当前要访问的目标路由来计算导航路径。

核心用法示例 #

比如，当用户没有categoryA的权限时，想相对product路由导航到categoryB，可以这样写：

canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<boolean> {
  return this.authService.hasPermission('product/categoryA').pipe(
    map(hasPerm => {
      if (hasPerm) {
        return true;
      } else {
        // 相对目标路由的父级（product）导航到categoryB
        this.router.navigate(['../categoryB'], { relativeTo: route });
        return false;
      }
    })
  );
}

相对路径规则说明 #

• ['../categoryB']：../表示向上跳一级（从categoryA的父路由product出发），再导航到categoryB
• ['./subroute']：./表示当前路由的子路由（如果存在的话）
• 直接写['sibling']：表示当前路由的同级路由（需确保relativeTo指向父路由）

内容的提问来源于stack exchange，提问作者Faruq