如何在 angular cli 中限制不需要的路由？

Question

我已经在 angular 8 应用程序中使用延迟加载设置了路由模块。我已经设置了多个路由模块。在我的身份验证路由模块中，我为 /auth/login 设置了一个路径。但是 /login 也重定向到同一组件。我怎样才能限制这个路由？

应用-routing.module

const routes: Routes = [
  {
    path: "auth",
    loadChildren: "./authentication/authentication.module#AuthenticationModule"
  },
  {
    path: "user",
    loadChildren: "./user/user.module#UserModule"
  },
  {
    path: "**",
    redirectTo: "auth/login"
  }
];

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

身份验证-routing.module

const routes: Routes = [
  {
    path: "login",
    component: LoginPageComponent
  }
];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule]
})

我原以为只有当我转到 /auth/login 路由时才加载登录组件，但当我转到 /login 路由而不重定向时它也会加载。

这是 stackblitz 上的示例项目：https://stackblitz.com/edit/angular-qor5kr

Answer 1

实际上，发生这种情况是因为您将“所有其他路由”(path: ‘**’) 重定向到 auth/login。所以问题不完全在/login route.

如果您只想限制 /login 路径 - 为它创建单独的组件。

此外，您可以在 path: ** 路由上放置一个 Guard 并实施适当的重定向。像这样：

// routes
  {
    path: "**",
    redirectTo: "auth/login",
    canActivate: [AuthGuard]
  }

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

@Injectable({
  providedIn: 'root',
})
export class AuthGuard implements CanActivate {
  canActivate(
    next: ActivatedRouteSnapshot,
    state: RouterStateSnapshot): boolean {

    if (state.url === '/login') {
        // Handle redirect here
    }
    return true;
  }
}

更新

检查 Stackblitz example 后，我发现了问题所在。您已将延迟加载 AuthenticationModule 直接包含到 AppModule 模块中。这导致了伪影。你应该删除它

@NgModule({
  imports:      [ 
    BrowserModule, 
    // AuthenticationModule, <= It's lazy loaded and should not be included
    AppRoutingModule
    ],
  declarations: [ AppComponent ],
  bootstrap:    [ AppComponent ]
})
export class AppModule { }

查看更正后的示例 here。

如何在 angular cli 中限制不需要的路由？

How to restrict unwanted routes in angular cli?

angular-routing

angular