重置根目錄時Aurelia路由器不工作

Question

我想在我的應用中使用aurelia-auth，並且還有一個與應用其餘部分完全分離的登錄頁面。我一直在這個鏈接下面的教程：https://auth0.com/blog/2015/08/05/creating-your-first-aurelia-app-from-authentication-to-calling-an-api/

我遇到的問題是我成功登錄後，嘗試路由到應用程序，沒有找到路線。無論我爲登錄重定向網址輸入什麼內容，我都找不到路由。

這裏是我的代碼：

app.js：

... 
import { Router } from 'aurelia-router'; 
import { AppRouterConfig } from './router-config'; 
import { FetchConfig } from 'aurelia-auth'; 

... 

@inject(..., Router, AppRouterConfig, FetchConfig) 
export class App { 
    constructor(router, appRouterConfig, FetchConfig) { 
     this.router = router; 
     this.appRouterConfig = appRouterConfig; 
     this.fetchConfig = fetchConfig; 

     ... 
    } 

    activate() { 
     this.fetchConfig.configure(); 
     this.appRouterConfig.configure(); 
    } 

    ... 

} 

login.js：

import { AuthService } from 'aurelia-auth'; 
import { Aurelia } from 'aurelia-framework'; 
... 

@inject(..., Aurelia, AuthService) 
export class LoginScreen { 
    constructor(..., aurelia, authService) { 
     this.aurelia = aurelia; 
     this.authService = authService; 
     ... 
    } 

    login() { 
     return this.authService.login(this.username, this.password) 
      .then(response => { 
       console.log("Login response: " + response); 
       this.aurelia.setRoot('app'); 
      }) 
      .catch(error => { 
       this.loginError = error.response; 
       alert('login error = ' + error.response); 
      }); 
    } 

    ... 

} 

main.js：

import config from './auth-config'; 
import { AuthService } from 'aurelia-auth'; 
import { Aurelia } from 'aurelia-framework'; 
... 

export function configure(aurelia) { 
    aurelia.use 
     .defaultBindingLanguage() 
     .defaultResources() 
     .developmentLogging() 
     .router() 
     .history() 
     .eventAggregator() 
     ... 
     .plugin('aurelia-auth', (baseConfig) => { 
      baseConfig.configure(config); 
     }); 


    let authService = aurelia.container.get(AuthService); 
    aurelia.start() 
     .then(a => { 
      if (authService.isAuthenticated()) { 
       a.setRoot('app'); 
      } else { 
       a.setRoot('login'); 
      } 
     }); 
} 

AUTH-配置。 js：

var config = { 
    baseUrl: 'http://localhost:3001', 
    loginUrl: 'sessions/create', 
    tokenName: 'id_token', 
    //loginRedirect: '#/home' //looks like aurelia-auth defaults to #/ which is fine for me 
} 

export default config; 

路由器config.js：

import { AuthorizeStep } from 'aurelia-auth'; 
import { inject } from 'aurelia-framework'; 
import { Router } from 'aurelia-router'; 

@inject(Router) 
export class AppRouterConfig { 
    constructor(router) { 
     this.router = router; 
    } 

    configure() { 
     console.log('about to configure router'); 

     var appRouterConfig = function (config) { 
      config.title = 'My App'; 

      config.addPipelineStep('authorize', AuthorizeStep); 

      config.map([ 
       { 
        route: ['', 'home'], 
        name: 'home', 
        moduleId: '.components/home/home', 
        nav: true, 
        title: 'Home', 
        auth: true 
       }, 
       { 
        route: ['employees'], 
        name: 'employees', 
        moduleId: './components/employees/employees', 
        nav: true, 
        title: 'Employees', 
        auth: true 
       } 
      ]); 

      this.router.configure(appRouterConfig); 
     } 
    }; 
} 

當加載應用程序，它成功地進入到登錄頁面，我能夠成功登錄並嘗試重定向，但我得到這個錯誤控制檯：

ERROR [app-router] Error: Route not found:/
    at AppRouter._createNavigationInstruction (http://127.0.0.1:8080/jspm_packages/npm/aurelia-router@1.0.0-rc.1.0.1/aurelia-router.js:1039:29) 
    at AppRouter.loadUrl (http://127.0.0.1:8080/jspm_packages/npm/aurelia-router@1.0.0-rc.1.0.1/aurelia-router.js:1634:19) 
    at BrowserHistory._loadUrl (http://127.0.0.1:8080/jspm_packages/npm/aurelia-history-browser@1.0.0-rc.1.0.0/aurelia-history-browser.js:301:55) 
    at BrowserHistory.activate (http://127.0.0.1:8080/jspm_packages/npm/aurelia-history-browser@1.0.0-rc.1.0.0/aurelia-history-browser.js:200:21) 
    at AppRouter.activate (http://127.0.0.1:8080/jspm_packages/npm/aurelia-router@1.0.0-rc.1.0.1/aurelia-router.js:1689:20) 
    at eval (http://127.0.0.1:8080/jspm_packages/npm/aurelia-router@1.0.0-rc.1.0.1/aurelia-router.js:1670:21) 
    at AppRouter.registerViewPort (http://127.0.0.1:8080/jspm_packages/npm/aurelia-router@1.0.0-rc.1.0.1/aurelia-router.js:1672:10) 
    at new RouterView (http://127.0.0.1:8080/jspm_packages/npm/aurelia-templating-router@1.0.0-rc.1.0.1/router-view.js:112:19) 
    at Object.invokeWithDynamicDependencies (http://127.0.0.1:8080/jspm_packages/npm/aurelia-dependency-injection@1.0.0-rc.1.0.1/aurelia-dependency-injection.js:329:20) 
    at InvocationHandler.invoke (http://127.0.0.1:8080/jspm_packages/npm/aurelia-dependency-injection@1.0.0-rc.1.0.1/aurelia-dependency-injection.js:311:168)error @ aurelia-logging-console.js:54log @ aurelia-logging.js:37error @ aurelia-logging.js:70(anonymous function) @ aurelia-router.js:1637 
aurelia-logging-console.js:54 ERROR [app-router] Router navigation failed, and no previous location could be restored. 

我在這裏搜索了很多答案，但很難找到很好的答案。任何人有任何想法？任何幫助表示讚賞！

Answer 1

我認爲問題在於你在activate()方法裏面配置路由器。在我看來，沒有必要這樣做。

您可以重置根組件後，導航到路徑：

this.aurelia.setRoot('./login') 
    .then((aurelia) => { 
    aurelia.root.viewModel.router.navigateToRoute('someLoginRoute'); 
    }); 

您還可以使用mapUnknownRoutes，這是非常有用的：

configureRouter(config, router) { 
     config.title = "Super Secret Project"; 
     config.map([ 
      { route: [ '', 'screen-1'], moduleId: "./screen-1", nav: true, title: "Beginscherm" }, 
      { route: 'screen-2', name:'screen-2', moduleId: "./screen-2", nav: true, title: "Beginscherm" } 
     ]); 

     config.mapUnknownRoutes(instruction => { 
     return './screen-1'; 
     }); 

     this.router = router;   
    } 

見這個例子https://gist.run/?id=00b8b3745a480fb04184e8440e8be8c5。請注意登錄/註銷功能。

我希望這有助於！

Answer 2

U可以通過重新加載或刷新應用程序來解決此問題。在設定應用程序 即 之後。 a.setRoot（'app'）; location.reload（）;