Angular 5能否创建仅支持RouterLink/Router访问、改URL跳404的私有路由？

当然可以实现！我来给你一步步拆解怎么搞定这个需求——让指定路由只能通过RouterLink或者Router服务跳转，用户直接在地址栏输URL就自动跳转到404页面。

核心思路 #

本质上我们需要区分内部发起的导航和外部/直接URL访问。Angular的Router在内部导航时会触发特定事件，我们可以利用这个特性标记导航状态，再通过路由守卫来校验状态，从而实现拦截逻辑。

具体实现步骤 #

1. 先做一个全局导航状态服务 #

这个服务用来记录当前是否是内部发起的导航：

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

@Injectable({
  providedIn: 'root'
})
export class NavigationStateService {
  // 标记位：true表示是内部导航
  isInternalNavigation = false;

  markAsInternal() {
    this.isInternalNavigation = true;
    // 导航完成后立刻重置标记，避免影响后续路由判断
    setTimeout(() => {
      this.isInternalNavigation = false;
    }, 0);
  }
}

2. 自定义路由守卫（CanActivate） #

用这个守卫来校验导航的合法性，不是内部导航就直接跳404：

import { Injectable } from '@angular/core';
import { CanActivate, Router, ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router';
import { NavigationStateService } from './navigation-state.service';

@Injectable({
  providedIn: 'root'
})
export class InternalOnlyGuard implements CanActivate {
  constructor(
    private navigationState: NavigationStateService,
    private router: Router
  ) {}

  canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean {
    if (this.navigationState.isInternalNavigation) {
      // 是内部导航，允许通过
      return true;
    } else {
      // 直接URL访问，跳转到404页面
      this.router.navigate(['/404']);
      return false;
    }
  }
}

3. 拦截内部导航，标记状态 #

我们需要确保所有内部跳转都先触发markAsInternal，这里提供两种常用方式：

方式一：自定义RouterLink指令（推荐）

重写默认的routerLink，点击时先标记内部导航状态：

import { Directive, HostListener } from '@angular/core';
import { RouterLink, Router, ActivatedRoute } from '@angular/router';
import { NavigationStateService } from './navigation-state.service';

@Directive({
  selector: '[appInternalRouterLink]'
})
export class InternalRouterLinkDirective extends RouterLink {
  constructor(
    router: Router,
    route: ActivatedRoute,
    private navigationState: NavigationStateService
  ) {
    super(router, route);
  }

  @HostListener('click')
  onClick(): void {
    this.navigationState.markAsInternal();
    super.onClick();
  }
}

使用的时候把原来的routerLink换成appInternalRouterLink即可：

<a appInternalRouterLink="/private-page">跳转到私有页面</a>

方式二：封装Router.navigate方法

如果是在代码里用router.navigate跳转，我们可以封装一个专用方法：

// 在你的组件或服务中
constructor(
  private router: Router,
  private navigationState: NavigationStateService
) {}

// 专门用于内部跳转的方法
navigateToInternal(path: string[]) {
  this.navigationState.markAsInternal();
  this.router.navigate(path);
}

调用时用这个封装方法代替直接的router.navigate就行。

4. 配置路由规则 #

最后在路由模块里给需要保护的路由加上我们的守卫：

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { PrivateComponent } from './private.component';
import { NotFoundComponent } from './not-found.component';
import { InternalOnlyGuard } from './internal-only.guard';

const routes: Routes = [
  { 
    path: 'private', 
    component: PrivateComponent,
    canActivate: [InternalOnlyGuard] // 应用我们的私有路由守卫
  },
  { path: '404', component: NotFoundComponent },
  { path: '**', redirectTo: '/404' }
];

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

注意事项 #

• 一定要记得重置isInternalNavigation的状态，不然一次内部导航后，后续所有访问都会被判定为内部导航，失去保护作用。
• 如果你的应用里还有其他内部跳转方式（比如Router.navigateByUrl），也要做对应的标记处理，不要遗漏。
• 这种方式能拦住绝大多数普通用户，但无法完全阻止技术熟练的用户模拟内部状态，如果你需要更严格的权限控制，建议结合用户身份认证一起使用。

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