[英]How to switch between login page and app with Aurelia
I'm using the Aurelia skeleton for my project. 我正在为我的项目使用Aurelia骨架。 Everything seemed so intuitive, however I'm stuck with a problem which I suspect is fairly easy (if you know how).
一切看起来都很直观,但是我遇到了一个我怀疑相当容易的问题(如果你知道的话)。
The problem is that the app.html / app.js is initially showing a nav bar and loading some default styles. 问题是app.html / app.js最初显示导航栏并加载一些默认样式。
Now I need a login page, which does not load anything but its own styles, no navbar no nothing - just its own login form. 现在我需要一个登录页面,它不会加载任何东西,除了它自己的样式,没有导航栏没有任何东西 - 只是它自己的登录表单。
So I tried something like this: 所以我尝试过这样的事情:
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>
Obviously that doesn't work (unless you refresh the page/f5), since the app.js / app.html is the root route which is always present and never changes. 显然这不起作用(除非你刷新页面/ f5),因为app.js / app.html是始终存在且永不改变的根路由。 But I hope the logic within the markup helps illustrate what I'm looking to solve?
但我希望标记中的逻辑有助于说明我想要解决的问题?
I guess my if only I knew how to reload the parent route (app.js) when I navigate from the login route, on login success, to another route. 我猜我只知道当我从登录路线(登录成功)导航到另一条路线时,如何重新加载父路线(app.js)。 And again when I logout, the parent route (app.js) should be refreshed as well once again.
当我退出时,父路线(app.js)也应该再次刷新。 Then all my problems would be solved.
然后我的所有问题都将得到解决。
What am I missing here? 我在这里错过了什么? :-)
:-)
I think aurelia's setRoot(module)
function will help with this. 我认为
setRoot(module)
的setRoot(module)
功能对此有所帮助。
Here's the standard main.js
file that "bootstraps" the aurelia app: 这是“引导”
main.js
应用程序的标准main.js
文件:
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')
}
When setRoot
is called with no arguments Aurelia looks for an app.js + app.html viewmodel and view. 当
setRoot
而没有参数时,Aurelia会查找app.js + app.html viewmodel和view。
We can adjust the logic to check whether the user is logged in and if not, show the login screen: 我们可以调整逻辑来检查用户是否已登录,如果没有,则显示登录屏幕:
main.js main.js
export function configure(aurelia) {
aurelia.use
.standardConfiguration()
.developmentLogging();
aurelia.start()
.then(a => {
if (userIsLoggedIn()) {
a.setRoot('app');
} else {
a.setRoot('login');
}
});
}
Then in your login view model you can call setRoot('app')
after the user has successfully logged in: 然后在您的登录视图模型中,您可以在用户成功登录后调用
setRoot('app')
:
login.js 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'));
}
}
Note: if your app includes a "logout" feature that will send the user back to the login screen (eg setRoot('login')
), be sure to reset the router and update the url accordingly. 注意:如果您的应用程序包含“退出”功能,将用户发送回登录屏幕(例如
setRoot('login')
),请务必重置路由器并相应地更新URL。 This will prevent issues when the user signs back in. More details in here and here . 这将防止用户重新登录时出现问题。 此处和此处提供更多详细信息。
有关setRoot的工作示例,您还可以查看https://foursails.github.io/sentry https://github.com/foursails/sentry
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.