Question

我想在路由器中实现授权步骤，因此我在a中使用了typescript示例 Aurelia docs几乎是verbatum。

我的导航栏现在无效，我不知道为什么？

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

        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;
            }
        }

..以下是我的navmenu.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 docs中的示例在任何地方都没有引用路由器这一事实有关。如何修改文档示例以便路由器与navmenue一起工作并且我的授权步骤有效？

Answer 1

您现在无法在任何地方绑定路由器。您需要将public router: Router字段添加到app.ts，并使用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();
            }
        }

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

1 个答案: