2

所以这可能是一个很长的帖子，但我希望有人能帮助我:)

我正在构建一个具有“拆分”布局的基于 Angular 2 Web 的应用程序，这意味着我将使用单独的布局组件，具体取决于我是否通过路由保护进行了身份验证。

当我第一次进入应用程序并且我没有来自服务器的活动会话或 cookie 时，我将被重定向到登录页面，但前提是该页面受到路由保护的保护。这个登录页面将被放入一个“公共”视图中，其中不包含<header>或<footer>标签<nav>。

这样做的目的是能够为<router-outlet></router-outlet>需要用户登录的视图组件加载一个 HTML 布局，并<router-outlet></router-outlet>在用户尝试访问“私有”路由时在另一个视图组件中加载另一个布局。

在 index.html 中

<html>
<head></head>
<body>
    <!-- Load application -->
    <my-app>
        <div class="vertical-wrapper center-block">
            <div class="vertical-align">
                <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
                <span class="sr-only">Loading Application...</span>
            </div>
        </div>
    </my-app>

    <!-- Scripts -->
    <script src="/dist/app.vendor.js"></script>
    <script src="/dist/app.js"></script>

    <!-- Development Server Reloading -->
    <script src="/webpack-dev-server.js"></script>
</body>
</html>

Routes.ts 文件

// Required Imports.
import { Routes, RouterModule } from '@angular/router';
import { NgModule } from '@angular/core';

// Routes values
import { PUBLIC_ROUTES } from  'app/routes/public.routes';
import { PRIVATE_ROUTES } from 'app/routes/private.routes';

// Layouts
import { PublicComponent, PrivateComponent } from 'app/layouts';

// Import Pages
import { NotFoundPage } from 'app/pages';

// Guards
import { LoginGuard } from 'app/services/login.guard';

const routes: Routes = [
    {
        canActivate: [LoginGuard],
        path: '',
        component: PrivateComponent,
        children: PRIVATE_ROUTES
    },
    {
        path: '',
        component: PublicComponent,
        children: PUBLIC_ROUTES
    },

    // Greedy-route sending everything not caught to 404 page.
    { path: '**', component: NotFoundPage }
];

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

然后，在我的私有和公共组件中，我放置了我的“子”路由，只是为了保持我的应用程序干净。

私有路由文件

import { StartPage, ListComponent } from 'app/pages';

export const PRIVATE_ROUTES = [
    {
        path: '',
        component: StartPage
    },
    {
        path: 'start',
        component: StartPage
    },
    {
        path: 'lists',
        component: ListComponent
    }
];

公共路线文件

import { LoginPage, LogoutPage } from 'app/pages';

export const PUBLIC_ROUTES = [
    {
        path: 'login',
        component: LoginPage
    },
    {
        path: 'logout',
        component: LogoutPage
    }
];

我正在加载私有或公共组件，具体取决于用户是否尝试访问受保护的页面。

现在到最后一部分。在我的“布局”文件夹中，我有private.component.html和public.component.html，都包含一个<router-outlet></router-outlet>.

私有组件 html

<div id="page-wrapper" [ngClass]="{'toggled': ShowNavigation}">
    <div id="navigation-wrapper">
        <navigation></navigation>
    </div>

    <div id="content-wrapper">
        <header class="col-xs-12 fixed-height-60" style="border-bottom: 2px solid #92A92A">
            <div class="pull-right vertical-wrapper">
                <div class="vertical-align padding-right-x1">
                    <span class="col-sm-12 hidden-xs text-right">{{CurrentUser.userDisplayName}}</span>
                    <span class="col-sm-12 hidden-xs text-right">{{CurrentUser.clientDescription}}</span>
                </div>

                <div class="vertical-align image-wrapper">
                    <div class="col-sm-12 col-xs-9 pull-xs-right">
                        <div class="row">
                            <img class="image" [src]="BrandingLogo" alt="Banding logo" />
                        </div>
                    </div>
                </div>
            </div>
        </header>

        <section class="col-xs-12">
            <router-outlet></router-outlet>
        </section>
    </div> 
</div>

公共组件 html

<div class="container-fluid">
    <div class="row">
        <router-outlet></router-outlet>
    </div>
</div>

我的问题是，我如何注册只有在路由守卫允许的情况下才能访问的路由子级？我需要能够切换布局，因为只有在应用程序本身内部才能查看<nav>示例。

我知道这不是最好的方法，但这就是我设法解决它的方法。随意贡献任何可以帮助我改善这一点的东西。

  • 有什么好的方法可以做到这一点吗？
  • 我是在正确的轨道上，还是完全迷失了方向？

如果你们中的任何人也需要看到这一点，我会为你们提供我的警卫。

import { Inject, Injectable } from '@angular/core';
import { LoginService } from 'app/services/login.service';

import {
    CanActivate,
    Router,
    RouterStateSnapshot,
    ActivatedRouteSnapshot
} from '@angular/router';

@Injectable()
export class LoginGuard implements CanActivate {
    constructor(
        @Inject(LoginService) private loginService: LoginService,
        @Inject(Router) private router: Router
    ) { }

    canActivate( activatedRoute: ActivatedRouteSnapshot,
                 routerState: RouterStateSnapshot       ): boolean {

        if (this.loginService.User)
            return true;

        this.router.navigate(['/login', { redirect: routerState.url.substr(1) }]);
        return false;
    }
}

这是我的 源代码树的概览

如果我不够清楚，请随时问我。

4

0 回答 0