我在我的项目中使用了Aurelia框架。每件事看起来都很直观,然而我被一个我怀疑相当容易的问题所困扰(如果你知道怎么做的话)。
问题是app.html / app.js最初会显示一个导航栏并加载一些默认样式。
现在我需要一个登录页,它不加载任何东西,但它自己的样式,没有导航栏什么都没有-只是它自己的登录表单。
所以我尝试了这样的方法:
app.js
<template>
<div if.bind="auth.isNotAuthenticated()">
<require from="components/login/index" ></require>
<login router.bind="router"></login>
</div>
<div if.bind="auth.isAuthenticated()">
<require from="nav-bar.html" ></require>
<require from="../styles/styles.css"></require>
<div class="container" id="banner">
<div class="row">
<img src="images/logo.png" />
</div>
</div>
<nav-bar router.bind="router"></nav-bar>
<div class="page-host">
<router-view></router-view>
</div>
</div>
</template>
显然,这不起作用(除非刷新页面/f5),因为app.js / app.html是始终存在且从不更改的根路径。但我希望标记中的逻辑有助于说明我要解决的问题?
当我从登录路由导航到另一个路由时,如果我知道如何重新加载父路由(app.js)就好了。同样,当我注销时,父路由(app.js)也应该再次刷新。然后我所有的问题就都解决了。
我在这里遗漏了什么?:-)
发布于 2015-11-01 10:30:40
我认为aurelia的setRoot(module)
函数会对此有所帮助。
下面是“引导”aurelia应用程序的标准main.js
文件:
main.js
export function configure(aurelia) {
aurelia.use
.standardConfiguration()
.developmentLogging();
aurelia.start()
.then(a => a.setRoot()); // this is the equivalent of setRoot('app')
}
当不带参数地调用setRoot
时,Aurelia会查找app.js + app.html视图模型和视图。
我们可以调整逻辑来检查用户是否登录,如果没有登录,则显示登录屏幕:
main.js
export function configure(aurelia) {
aurelia.use
.standardConfiguration()
.developmentLogging();
aurelia.start()
.then(a => {
if (userIsLoggedIn()) {
a.setRoot('app');
} else {
a.setRoot('login');
}
});
}
然后,在登录视图模型中,您可以在用户成功登录后调用setRoot('app')
:
login.js
import {Aurelia, inject} from 'aurelia-framework';
import {AuthService} from './my-auth-service';
@inject(Aurelia, AuthService)
export class Login {
userName = '';
password = '';
constructor(aurelia, authService) {
this.aurelia = aurelia;
this.authService = authService;
}
submit() {
// attempt to login and if successful, launch the app view model.
this.authService.login(userName, password)
.then(() => this.aurelia.setRoot('app'));
}
}
注意:如果你的应用包含一个“注销”功能,可以让用户返回到登录界面(如setRoot('login')
__),请确保并相应地更新url。这将防止用户重新登录时出现问题。有关更多详细信息,请访问和。
发布于 2015-11-05 18:50:00
有关setRoot的工作示例,还可以查看https://foursails.github.io/sentry https://github.com/foursails/sentry
https://stackoverflow.com/questions/33458274
复制相似问题