重置根目录时Aurelia路由器不起作用 [英] Aurelia router not working when resetting root
问题描述
我想在我的应用程序中使用aurelia-auth，并且还具有一个与应用程序其余部分完全分开的登录页面.我一直在通过此链接关注本教程:
I want to use aurelia-auth in my app and also have a login page that is completely separate from the rest of the app. I have been following the tutorial at this link: https://auth0.com/blog/2015/08/05/creating-your-first-aurelia-app-from-authentication-to-calling-an-api/
我遇到的问题是我成功登录并尝试路由到该应用程序后，未找到任何路由.无论我为登录重定向网址添加了什么，我都找不到路由.
The problem I am having is after I successfully login and attempt to route to the app, none of the routes are found. I get route not found regardless of what I put in for the login redirect url.
这是我的代码:
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-config.js:
auth-config.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;
router-config.js:
router-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);
}
};
}
加载应用程序时，它成功进入登录页面，我能够成功登录并尝试重定向，但是在控制台中出现此错误:
When loading the app, it successfully goes to login page and I'm able to successfully login and it tries to redirect, but I get this error in the console:
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.
我正在四处寻找有关此问题的答案，但是很难找到好的答案.有人有什么想法吗?任何帮助表示赞赏！
I'm googling around quite a bit for answers to this, but having difficulty finding good answers. Anybody have any ideas? Any help is appreciated!
推荐答案
我认为问题在于您正在activate()方法内部配置路由器.我认为没有必要这样做.
I think the problem is that you are configuring the router inside activate() method. In my opinion, there is no need to do this.
您可以在重置根组件后导航至路线:
You can navigate to a route after resetting the root component:
this.aurelia.setRoot('./login')
.then((aurelia) => {
aurelia.root.viewModel.router.navigateToRoute('someLoginRoute');
});
您还可以使用mapUnknownRoutes，这非常有用:
You can also use the mapUnknownRoutes, which is very useful:
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 .请注意登录/注销功能.
See this example https://gist.run/?id=00b8b3745a480fb04184e8440e8be8c5. Pay attention at login/logout functions.
我希望这会有所帮助！
这篇关于重置根目录时Aurelia路由器不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
