Aurelia - Das Einrichten der Basis-Autorisierungs-Pipeline führt dazu, dass Navigations-Links verschwinden

Question

Ich wollte einen Autorisierungsschritt in meinem Router implementieren und so nutzte ich das Typoskript-Beispiel in einem Aurelia docs fast verbatum.

Meine Navbar funktioniert jetzt nicht und ich weiß nicht warum?

So stelle ich den Router ein.

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

Dies ist, wie sie umgesetzt werden, verwenden, um ..

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

..und hier ist, wie mein navmenu.html impmlemented ist ..

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

ich denke, es könnte etwas mit der Tatsache zu tun, dass das Beispiel aus der Aurelia-Dokumentation sich nicht auf Router irgendwo bezieht. Wie kann ich das Dokumentationsbeispiel ändern, so dass der Router mit dem Navmenue funktioniert und der Autorisierungsschritt funktioniert?

Answer 1

Sie binden den Router jetzt nirgendwo mehr. Sie müssen das Feld public router: Router zu app.ts hinzufügen und den Router in der configureRouter-Methode binden.

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