Aurelia - 设置基本授权管道会导致导航链接消失

Question

我想在我的路由器中实现一个授权步骤，所以我在奥蕾莉亚几乎逐字记录。

我的导航栏现在不起作用，我不知道为什么？

这就是我设置路由器的方式。

        import { Aurelia, PLATFORM } from 'aurelia-framework';
        import { Redirect, NavigationInstruction, RouterConfiguration, Next } from 'aurelia-router';
        export class App {
            configureRouter(config: RouterConfiguration): void {
                config.title = 'Aurelia';
                config.addAuthorizeStep(AuthorizeStep);
                config.map([{
                    route: ['', 'home'],
                    name: 'home',
                    settings: { icon: 'home' },
                    moduleId: PLATFORM.moduleName('../website/home/home'),
                    nav: true,
                    title: 'Home'
                }, {
                    route: 'counter',
                    name: 'counter',
                    settings: { icon: 'education' },
                    moduleId: PLATFORM.moduleName('../website/counter/counter'),
                    nav: true,
                    title: 'Counter'
                }, {
                    route: 'fetch-data',
                    name: 'fetchdata',
                    settings: { icon: 'th-list' },
                    moduleId: PLATFORM.moduleName('../website/fetchdata/fetchdata'),
                    nav: true,
                    title: 'Fetch data'
                }, {
                    route: 'login',
                    name: 'login',
                    settings: { icon: 'user' },
                    moduleId: PLATFORM.moduleName('../components/auth/login/login'),
                    nav: true,
                    title: 'Login'
                },
                ]);
            }
        }
        class AuthorizeStep {
            run(navigationInstruction: NavigationInstruction, next: Next): Promise<any> {
                if (navigationInstruction.getAllInstructions().some(i => i.config.settings.auth)) {
                    var isLoggedIn = true;
                    console.log('It got here!');
                  if (!isLoggedIn) {
                        return next.cancel(new Redirect('login'));
                    }
                }
                return next();
            }
        }

这就是它过去实现的方式。

        import { Aurelia, PLATFORM } from 'aurelia-framework';
        import { Router, RouterConfiguration, NavigationInstruction, Redirect, Next } from 'aurelia-router';
        export class App {
            router: Router;
            configureRouter(config: RouterConfiguration, router: Router) {
                config.title = 'Aurelia';
                config.addAuthorizeStep(AuthorizeStep);
                config.map([{
                    route: [ '', 'home' ],
                    name: 'home',
                    settings: { icon: 'home' },
                    moduleId: PLATFORM.moduleName('../website/home/home'),
                    nav: true,
                    title: 'Home'
                }, {
                    route: 'counter',
                    name: 'counter',
                    settings: { icon: 'education' },
                    moduleId: PLATFORM.moduleName('../website/counter/counter'),
                    nav: true,
                    title: 'Counter'
                }, {
                    route: 'fetch-data',
                    name: 'fetchdata',
                    settings: { icon: 'th-list' },
                    moduleId: PLATFORM.moduleName('../website/fetchdata/fetchdata'),
                    nav: true,
                    title: 'Fetch data'
                }, {
                    route: 'login',
                    name: 'login',
                    settings: { icon: 'user' },
                    moduleId: PLATFORM.moduleName('../components/auth/login/login'),
                    nav: true,
                    title: 'Login'
                },
                ]);
                this.router = router;
            }
        }

..这就是我的导航菜单.html是如何扰的。

        <template bindable="router">
        <require from="./navmenu.css"></require>
        <div class="main-nav">
            <div class="navbar navbar-inverse">
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                        <span class="sr-only">Toggle navigation</span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                    <a class="navbar-brand" href="#/home">Jobsledger.API</a>
                </div>
                <div class="navbar-collapse collapse">
                    <ul class="nav navbar-nav">
                        <li repeat.for = "row of router.navigation" class="${ row.isActive ? 'link-active' : '' }" >
                            <a href.bind = "row.href">
                                <span class="glyphicon glyphicon-${ row.settings.icon }"></span> ${ row.title }
                            </a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </template>

我认为这可能与 Aurelia 文档中的示例没有在任何地方引用路由器这一事实有关。 如何修改文档示例，以便路由器与导航菜单一起工作并且我的授权步骤正常工作？

Answer 1

您现在没有在任何地方绑定路由器。您需要在app.ts中添加public router: Router字段，并在configureRouter方法中绑定路由器。

        import { Aurelia, PLATFORM } from 'aurelia-framework';
        import { Redirect, NavigationInstruction, Router, RouterConfiguration, Next } from 'aurelia-router';
        export class App {
            public router: Router;
            configureRouter(config: RouterConfiguration, router: Router): void {
                this.router = router;
                config.title = 'Aurelia';
                config.addAuthorizeStep(AuthorizeStep);
                config.map([{
                    route: ['', 'home'],
                    name: 'home',
                    settings: { icon: 'home' },
                    moduleId: PLATFORM.moduleName('../website/home/home'),
                    nav: true,
                    title: 'Home'
                }, {
                    route: 'counter',
                    name: 'counter',
                    settings: { icon: 'education' },
                    moduleId: PLATFORM.moduleName('../website/counter/counter'),
                    nav: true,
                    title: 'Counter'
                }, {
                    route: 'fetch-data',
                    name: 'fetchdata',
                    settings: { icon: 'th-list' },
                    moduleId: PLATFORM.moduleName('../website/fetchdata/fetchdata'),
                    nav: true,
                    title: 'Fetch data'
                }, {
                    route: 'login',
                    name: 'login',
                    settings: { icon: 'user' },
                    moduleId: PLATFORM.moduleName('../components/auth/login/login'),
                    nav: true,
                    title: 'Login'
                },
                ]);
            }
        }
        class AuthorizeStep {
            run(navigationInstruction: NavigationInstruction, next: Next): Promise<any> {
                if (navigationInstruction.getAllInstructions().some(i => i.config.settings.auth)) {
                    var isLoggedIn = true;
                    console.log('It got here!');
                  if (!isLoggedIn) {
                        return next.cancel(new Redirect('login'));
                    }
                }
                return next();
            }
        }