时间戳

首页 > 解决方案 > 如何限制角度cli中不需要的路线？

angular - 如何限制角度cli中不需要的路线？

问题描述

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

App-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]
})

身份验证路由模块

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

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

我希望仅在我去路由时加载登录组件/auth/login，但是当我去/login路由而不重定向时它也会加载。

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

标签： angularangular-routing

解决方案

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

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

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

// 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 示例后，我发现了问题所在。您已将延迟加载AuthenticationModule直接包含到AppModule模块中。这导致了工件。你应该删除它

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

请参阅此处的更正示例。

推荐阅读