Aurelia 设置多个根时屏幕冻结

当我的aurelia应用程序启动时，我首先将它们发送到登录页面，检查它们是否已登录，如果已登录，则将root设置为app，否则，让它们登录

 aurelia.start().then(() => aurelia.setRoot(PLATFORM.moduleName("modules/login")));

根据我能找到的一切，这应该行得通。它确实将root设置为与控制台中的活动相关的代码，但是屏幕上的html永远不会从登录屏幕移动。即使在地址栏中手动键入某些内容也不会更改html。看来路由器已经停止工作了。控制台中未记录任何错误

import { AuthenticateStep, AuthService } from 'aurelia-authentication';
import { Router} from 'aurelia-router';
import { autoinject, PLATFORM, Aurelia } from "aurelia-framework";

@autoinject()
export class Login {

    constructor(private router: Router, private authService: AuthService, private aurelia:Aurelia) {
            console.log("Starting Login...")
    }

    activate() {
        if (this.authService.authenticated) {
            console.log("is authenticate")
            this.router.navigate('/', { replace: true, trigger: false });

            console.log("setting root to 'app'");
            this.aurelia.setRoot(PLATFORM.moduleName("app"));


        }
        else {
            console.log("not auth");
        }
    }
}

在app.ts中

activate() {
  console.log("app.activate");
  ...

}

我还有别的事要做吗

我试过：

---

这是：

以下是一些你可以尝试的东西：

在告诉aurelia切换根目录之前，请确保导航已完成

this.router.navigate('/', { replace: true, trigger: false })
    then(() => this.aurelia.setRoot(PLATFORM.moduleName("app")));

如果路由器在当前激活后仍有工作要做，则需要解决承诺，因为该工作需要中止

return this.router.navigate('/', { replace: true, trigger: false })
    then(() => this.aurelia.setRoot(PLATFORM.moduleName("app")));

在configureRouter中切换根断点后，请验证是否重新配置了AppRouter。您可能需要手动重置路由器。如果isConfigured标志仍然为真，请重置路由器

你可以尝试完全不同的方法

就我个人而言，当我需要在public和authenticated shell之间切换root时，我只为其中一个或两个shell设置了专用路径前缀，并且在我的主方法中，我根据当前window.location将root设置为正确的应用程序

主要示例：

在这些根目录之间重定向到路由器之外，只需使用window.location.href=

虽然可以说这有点老套，但这种方法的好处是，在切换之后，您始终会有一个完全干净的Aurelia状态，因此在切换之后您可能不需要清理

---

在非公共根目录中，您尝试从localStorage获取身份验证令牌，如果没有或用户没有足够的权限，只需将用户踢回公共目录。

设置根目录非常简单，但需要注意：

在响应用户生成的事件或在附加的事件中设置它

试图在激活的事件或构造函数中设置它将导致屏幕在根屏幕上冻结

我花了差不多一天的时间才弄明白，所以我想我会把它传下去

以下是对我有效的方法：我创建了一个应用程序外壳，它由main设置为root

在AppShell中，我检查此人是否已经登录，然后根据结果设置根

import { AuthenticateStep, AuthService } from 'aurelia-authentication';
import { AppRouter } from 'aurelia-router';
import { autoinject, PLATFORM, Aurelia } from "aurelia-framework";

@autoinject()
export class AppShell {

    constructor(private router: AppRouter, private authService: AuthService, private aurelia: Aurelia) {

    }

    attached() {
        this.setRoot();
    }

    setRoot() {
        this.router.navigate('/', { replace: true, trigger: false }); //Not actually needed here, but is if the router has already been configured.
        if (this.authService.authenticated) {
            this.aurelia.setRoot(PLATFORM.moduleName("app"));
        }
        else {
            this.aurelia.setRoot(PLATFORM.moduleName("modules/login"));
        }


    }
}

---

您显示的是应用程序的激活方法还是另一个页面？你能分享你的应用程序和完整的控制台输出吗？如果你在App的constructor/bind/attached/activate中设置了一个断点，那么会发生什么情况呢？setRoot之后是否会命中其中任何一个断点？这是从登录页面获得的。我加了全班。我拍摄了控制台的屏幕截图，显示在检查身份验证后，应用程序确实设置为root。问题是登录页面会继续显示，就像它在该页面上被冻结一样，之后将无法导航。非常感谢。我终于弄明白了到底发生了什么。为什么连接是一个安全的地方来做这件事的主要原因是因为那是组件生命周期的结束。在构造函数和activate中，由于setRoot是一个异步操作，因此之后仍然会并行发生一些事情。因此，我建议在诸如activate之类的异步钩子期间解决承诺

import { AuthenticateStep, AuthService } from 'aurelia-authentication';
import { AppRouter } from 'aurelia-router';
import { autoinject, PLATFORM, Aurelia } from "aurelia-framework";

@autoinject()
export class AppShell {

    constructor(private router: AppRouter, private authService: AuthService, private aurelia: Aurelia) {

    }

    attached() {
        this.setRoot();
    }

    setRoot() {
        this.router.navigate('/', { replace: true, trigger: false }); //Not actually needed here, but is if the router has already been configured.
        if (this.authService.authenticated) {
            this.aurelia.setRoot(PLATFORM.moduleName("app"));
        }
        else {
            this.aurelia.setRoot(PLATFORM.moduleName("modules/login"));
        }


    }
}