Question

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

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

根据我能找到的一切，这应该有效。它确实根据代码的关系设置了根目录，因为我在控制台中看到了活动，但是屏幕上的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（{1}}中的断点后重新配置AppRouter，您可能需要手动configureRouter路由器是.reset()标志是不知何故仍然如此）

你可以尝试不同的方法。

就个人而言，当我需要在公共shell和经过身份验证的shell之间切换root时，我只有一个（或两者）的专用路径前缀，并且在我的isConfigured方法中，我将根设置为正确的{{1基于当前的main。

示例（在App中）：

window.location

只需使用main;

，就可以在路由器外部重定向到路由器之外

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

在非公共根目录中，您尝试从localStorage中获取身份验证令牌，如果没有（或者他们没有足够的权限），只需将用户踢回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")); }。

Answer 2

设置根很容易，但有一点需要注意：

将其设置为响应用户生成的事件或附加事件。

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

这花了我一天的时间来弄明白，所以我想我会把它传递出去。

这对我有用：我创建了一个“app-shell”，它由main设置为root。

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


    }
}

设置多根时的屏幕冻结

2 个答案: