如何使用Aurelia在登录页面和应用程序之间切换
我在我的项目中使用了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)也应该再次刷新。然后我所有的问题就都解决了。
我在这里遗漏了什么？:-)
回答 2
Stack Overflow用户
发布于 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。这将防止用户重新登录时出现问题。有关更多详细信息，请访问和。
Stack Overflow用户
发布于 2015-11-05 18:50:00
有关setRoot的工作示例，还可以查看https://foursails.github.io/sentry https://github.com/foursails/sentry
https://stackoverflow.com/questions/33458274
复制相似问题