Aurelia - Setting up basic authorization pipeline

Question

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

This is how it use to be implemented..

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

..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>

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?

Answer 1

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