设置多个根时屏幕冻结

Question

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

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

根据我能找到的一切，这应该可行。就代码而言，它实际上将根设置为我在控制台中看到的 activity，但屏幕上的 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");
  ...

}

还有什么我应该做的吗？

我试过了：https://github.com/aurelia/framework/issues/400

还有这个：https://ilikekillnerds.com/2017/07/aurelia-routing-switching-root-using-setroot/

Answer 1

以下是您可以尝试的一些方法：

链接承诺（确保在告诉 aurelia 切换根目录之前完成导航）

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

解决承诺（如果路由器在当前 activate 之后仍有工作要做，则这是必要的，因为需要中止该工作）

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

验证切换root后AppRouter是否重新配置（断点在configureRouter，可能需要手动.reset()路由器是isConfigured flag 在某种程度上仍然是 true)

您可以尝试完全不同的方法。

就个人而言，当我需要在 public 和经过身份验证的 shell 之间切换根目录时，我只是为其中一个（或两者）和我的 main 方法提供了专用路径前缀我根据当前的 window.location.

将根设置为正确的 App

示例（在 main 中）：

if (/\/public/.test(window.location.pathname)) {
  au.setRoot(PLATFORM.moduleName("shell/public"));
} else if ((/\/admin/.test(window.location.pathname)) {
  au.setRoot(PLATFORM.moduleName("shell/admin"));
} else {
  au.setRoot(PLATFORM.moduleName("shell/app"));
}

这些根之间的重定向在路由器之外，只需使用 window.location.href = "...";

虽然可以说它有点 hacky，但这种方法的好处是在切换后你将始终拥有一个完全干净的 Aurelia 状态，因此你可能需要更少的清理。

在非 public 根中，您尝试从 localStorage 获取身份验证令牌，如果有 none（或者他们没有），只需将用户踢回 public没有足够的权限）。

Answer 2

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

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

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

这花了我差不多一天的时间才弄清楚，所以我想我会把它传下去。

以下是对我有用的方法：我创建了一个 "app-shell"，它被 main 设置为根目录。

在app-shell中，我先检查对方是否已经登录，然后根据结果设置root

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"));
        }


    }
}

设置多个根时屏幕冻结

Screen Freezing when Setting Multiple Roots

aurelia