Aurelia-设置基本授权管道会导致导航链接消失 [英] Aurelia - Setting up basic authorization pipeline causes navigation links to disappear

问题描述

我想在路由器中实施授权步骤，因此我在a中使用了打字稿示例 Aurelia文档几乎是verbatum.

I wanted to implement an authorization step in my router and so I utilized the typescript example in the a Aurelia docs almost verbatum.

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

My navbar now does not work and I dont know why?

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

This is how I set up the router.

        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的执行方式..

..and here is how my navmenu.html is impmlemented..

        <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一起使用，并使授权步骤正常工作?

I think it might be something to do with the fact the example from the Aurelia docs doesnt refer to router anywhere. How can I modify the docs example so that the router works with the navmenue and I have the authorization step working?

推荐答案

您现在不在任何地方绑定路由器.您需要将public router: Router字段添加到app.ts，并使用configureRouter方法绑定路由器.

You're not binding the router anywhere now. You need to add the public router: Router field to the app.ts, and bind the router in the configureRouter method.

        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-设置基本授权管道会导致导航链接消失的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！