- 首页
- 前端开发
- 如何使用 Aurelia 在登录页面和应用程序之间切换
如何使用 Aurelia 在登录页面和应用程序之间切换
[英] How to switch between login page and app with Aurelia
本文介绍了如何使用 Aurelia 在登录页面和应用程序之间切换的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我在我的项目中使用 Aurelia 骨架.一切似乎都很直观，但我遇到了一个我怀疑相当容易的问题(如果你知道如何做).
问题是 app.html/app.js 最初显示导航栏并加载一些默认样式.
现在我需要一个登录页面，它除了自己的样式外不加载任何内容，没有导航栏，什么都没有——只有自己的登录表单.
所以我尝试了这样的事情:
app.js
<div if.bind="auth.isNotAuthenticated()"><require from="components/login/index" ></require><login router.bind="router"></login>
<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"/>
<nav-bar router.bind="router"></nav-bar><div class="page-host"><路由器视图></路由器视图>
显然这不起作用(除非您刷新页面/f5)，因为 app.js/app.html 是始终存在且永不更改的根路由.但我希望标记中的逻辑有助于说明我要解决的问题?
我想，当我从登录路由导航到另一条路由时，如果我知道如何重新加载父路由(app.js)就好了.再次当我注销时，父路由(app.js)也应该再次刷新.那么我所有的问题都会解决.
我在这里错过了什么?:-)
解决方案
我认为 aurelia 的 setRoot(module) 函数会对此有所帮助.
这是引导"aurelia 应用程序的标准main.js 文件:
main.js
export function configure(aurelia) {aurelia.use.standardConfiguration().developmentLogging();aurelia.start().then(a => a.setRoot());//这相当于 setRoot('app')}
当 setRoot 被无参数调用时，Aurelia 会寻找 app.js + app.html 视图模型和视图.
我们可以调整逻辑来检查用户是否登录，如果没有，则显示登录屏幕:
main.js
export function configure(aurelia) {aurelia.use.standardConfiguration().developmentLogging();aurelia.start().then(a => {如果(userIsLoggedIn()){a.setRoot('app');} 别的 {a.setRoot('登录');}});}
然后在您的登录视图模型中，您可以在用户成功登录后调用 setRoot('app'):
login.js
从'aurelia-framework'导入{Aurelia，inject}；从 './my-auth-service' 导入 {AuthService}；@inject(Aurelia, AuthService)导出类登录{用户名 = '';密码 = '';构造函数(aurelia，authService){this.aurelia = aurelia;this.authService = authService;}提交() {//尝试登录，如果成功，启动应用视图模型.this.authService.login(用户名，密码).then(() => this.aurelia.setRoot('app'));}}
注意:如果您的应用包含将用户返回到登录屏幕的注销"功能(例如 setRoot('login'))，请确保 重置路由器并相应地更新网址.这将防止用户重新登录时出现问题.此处和这里.
I'm using the Aurelia skeleton for my project. 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.
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
<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. 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. And again when I logout, the parent route (app.js) should be refreshed as well once again. Then all my problems would be solved.
What am I missing here? :-)
解决方案
I think aurelia's setRoot(module) function will help with this.
Here's the standard main.js file that "bootstraps" the aurelia app:
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.
We can adjust the logic to check whether the user is logged in and if not, show the login screen:
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:
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. This will prevent issues when the user signs back in. More details in here and here.
这篇关于如何使用 Aurelia 在登录页面和应用程序之间切换的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
