带保护的Angular 5无组件路由无法命中重定向

是指在Angular 5中，当使用无组件路由并且需要对某些路由进行保护时，可能会遇到无法命中重定向的问题。

无组件路由是指在路由配置中不使用组件，而是直接使用路径来定义路由。保护路由是指需要对某些路由进行权限验证或登录验证，只有满足条件的用户才能访问该路由。

在Angular 5中，可以通过AuthGuard来实现路由的保护。AuthGuard是一个实现了CanActivate接口的服务，用于判断用户是否有权限访问某个路由。当用户没有权限访问某个路由时，可以使用路由重定向来将用户导航到其他页面。

然而，当使用无组件路由并且需要保护路由时，由于无组件路由没有对应的组件，无法直接使用CanActivate守卫进行权限验证。这就导致了无法命中重定向的问题。

解决这个问题的方法是使用CanActivateChild守卫。CanActivateChild守卫可以应用于父路由的子路由，用于对子路由进行权限验证。通过在父路由中定义CanActivateChild守卫，并在子路由中配置重定向路由，可以实现对无组件路由的保护和重定向。

以下是一个示例代码：

// app-routing.module.ts
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { AuthGuard } from './auth.guard';

const routes: Routes = [
  {
    path: 'protected',
    canActivateChild: [AuthGuard],
    children: [
      { path: '', redirectTo: 'redirected', pathMatch: 'full' },
      { path: 'redirected', component: RedirectedComponent }
    ]
  }
];

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

// auth.guard.ts
import { Injectable } from '@angular/core';
import { CanActivateChild, Router } from '@angular/router';

@Injectable({
  providedIn: 'root'
})
export class AuthGuard implements CanActivateChild {
  constructor(private router: Router) {}

  canActivateChild(): boolean {
    // Add your authentication logic here
    const isAuthenticated = true; // Example: assume user is authenticated

    if (!isAuthenticated) {
      this.router.navigate(['/login']); // Redirect to login page if not authenticated
      return false;
    }

    return true;
  }
}

// redirected.component.ts
import { Component } from '@angular/core';

@Component({
  template: '<h1>Redirected Component</h1>'
})
export class RedirectedComponent { }

在上述示例中，我们定义了一个名为AuthGuard的守卫服务，实现了CanActivateChild接口。在AuthGuard中，我们可以添加自定义的权限验证逻辑。如果用户未经验证，则导航到登录页面。在父路由中，我们使用canActivateChild属性将AuthGuard应用于子路由。在子路由中，我们配置了重定向路由，当用户访问父路由时，会自动重定向到子路由。

这样，当使用无组件路由并且需要保护路由时，就可以通过CanActivateChild守卫和重定向路由来解决无法命中重定向的问题。

推荐的腾讯云相关产品：腾讯云云服务器（CVM）和腾讯云负载均衡（CLB）。