Javascript 如何使用Aurelia在登录页面和应用程序之间切换

我正在使用Aurelia骨架进行我的项目。一切看起来都很直观，但我遇到了一个问题，我怀疑这个问题相当容易（如果你知道怎么做的话）

问题是app.html/app.js最初显示一个导航栏并加载一些默认样式

现在我需要一个登录页面，它只加载自己的样式，没有导航栏，什么都没有，只有自己的登录表单

所以我试过这样的方法：

app.js

显然，这是行不通的（除非刷新页面/f5），因为app.js/app.html是根路由，它总是存在并且从不更改。但我希望标记中的逻辑有助于说明我想要解决的问题

我想，如果我知道如何在登录成功后从登录路径导航到另一条路径时重新加载父路径（app.js），那我就太幸运了。当我注销时，父路由（app.js）也应该再次刷新。然后我所有的问题都会解决

---

我错过了什么？：-）

我认为aurelia的

setRoot（module）

函数将对此有所帮助

下面是“引导”aurelia应用程序的标准

main.js

文件：

main.js

导出功能配置（aurelia）{ 奥雷莉亚。用途 .standardConfiguration（） .developmentLogging（）； aurelia.start（） .then（a=>a.setRoot（））；//这是setRoot（'app'）的等价物 } 当调用

setRoot

时，不带任何参数，Aurelia将查找app.js+app.html视图模型和视图

我们可以调整逻辑以检查用户是否登录，如果没有，则显示登录屏幕：

main.js

导出功能配置（aurelia）{ 奥雷莉亚。用途 .standardConfiguration（） .developmentLogging（）； aurelia.start（） .然后（a=>{ if（userIsLoggedIn（））{ a、 setRoot（'app'）； }否则{ a、 setRoot（'login'）； } }); } 然后，在登录视图模型中，用户成功登录后，可以调用

setRoot（'app'）

：

login.js

import{Aurelia，inject}来自“Aurelia框架”；
从“/my auth service”导入{AuthService}；
@注入（Aurelia、AuthService）
导出类登录{
用户名=“”；
密码=“”；
构造函数（aurelia、authService）{
这个。奥雷利亚=奥雷利亚；
this.authService=authService；
}
提交（）{
//尝试登录，如果成功，启动应用程序视图模型。
this.authService.login（用户名、密码）
.然后（（）=>this.aurelia.setRoot（'app'）；
}
}

---

注意：如果您的应用程序包含一个“注销”功能，将用户发送回登录屏幕（例如

setRoot（'login'）

），请确保相应地更新url。这将防止用户重新登录时出现问题。和中的更多详细信息。

有关setRoot的工作示例，您也可以查看

---

非常感谢您给出了令人惊讶的答案！setRoot确实是一条路要走@jeremy danyow，当我在身份验证后调用

setRoot

时，aurelia加载js模块和相应的HTML，但不在页面上呈现任何内容。如果我在这一点上点击refresh，一切都会正常加载。上面的代码有什么遗漏吗？老兄……我真不敢相信我从来没有想到过这一点。这真是天才，现在我正在面对我所做的所有愚蠢的黑客，以同样的方式使这项工作…哈-很高兴这是有益的！您好，我从main.js的何处获取userisloggedin（）函数？我想调用全局身份验证服务，但不知道如何在main.js中获取实例。