Question

我希望将多个组件与根路径相关联，以便为匿名用户显示一个登录页面视图，并为经过身份验证的用户显示收件箱，而无需使用手动导航和路径更改拐杖。

我尝试使用这样的路由块来启用我的场景：

{ path: '', component: LandingComponent, canActivate: [ ForbidAuthGuard ] },
{ path: '', component: LocationsComponent, canActivate: [ RequireAuthGuard ] }

Angular确实在调用ForbidAuthGuard，这对经过身份验证的用户失败，因此完全取消了导航事件，忽略了RequireAuthGuard路由。

正如他们相互冲突的名字所暗示的那样，两个守卫都是互相排斥的，所以只有一条路线会活跃，但Angular似乎忽略了第二条路线。

这种机制是否可行？或者是否有其他技术可以实现第一段的最终目标？

为了完整起见，我使用的是@ angular / router和@ angular / core，版本为5.2.8。

Answer 1

您可以这样做：

{ path: '', component: MyService.DoACheck() ? LandingComponent, LocationsComponent },

但那不会使用你的警卫。

我认为，更常见的解决方案是您不想要的解决方案：

用守卫定义一条路线。

在该路线保护中，确定用户是否可以访问该路线，如果没有，则导航到另一条路线。

像这样：

export  class AuthGuard implements CanActivate {

    constructor(private authService: AuthService,
                private router: Router) { }

    canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean {
        return this.checkLoggedIn(state.url);
    }

    checkLoggedIn(url: string): boolean {
        if (this.authService.isLoggedIn()) {
            return true;
        }

        // Retain the attempted URL for redirection
        this.authService.redirectUrl = url;
        this.router.navigate(['/login']);
        return false;
    }
}

Answer 2

是的，您可以将多个组件关联到单个路由：

<强> app.component.html

<div class="block">
  <div class="columns">
    <div class="column is-two-thirds">
      <router-outlet></router-outlet>
    </div>

    <div class="column">
      <router-outlet name="aux"></router-outlet>
    </div>
  </div>
</div>

路由配置

{
  path: 'my-single-url',
  children: [
    { path: '', component: ComponentOne },
    { path: '', component: ComponentTwo, outlet: 'aux' }
  ]
}

角度支持是否具有单个路径的多个路径？

2 个答案: