Aurelia - 使用不同的路由配置在应用程序根之间切换

Question

UPDATE

这个问题可能与mu问题有关吗？ https://github.com/aurelia/framework/issues/400

---

我有一个具有两个不同根的Aurelia应用程序,一个用于用户的loggen,另一个用于匿名用户.

我在其他Aurelia应用程序中根据此答案中的方法实现了app root 的操作.当login模块是一个没有其他路由的"隔离"模块时,这种方法非常有效,但我现在很难让它运行起来.

index.js - 匿名用户的root

import {inject, useView, Aurelia} from "aurelia-framework";
import AuthService from "./services/auth-service";

@useView("app.html")
@inject(AuthService)
export class Index {   
    constructor(authService) {
        this.auth = authService;
    }

    configureRouter(config, router) {
        config.title = "Super Secret Project";
        config.options.pushState = true;
        config.map([
            { route: ["","home"], moduleId: "home", nav: true, title: "Beginscherm" },
            { route: "over", moduleId: "about", nav: true, title: "Over" },
            { route: "inloggen", moduleId: "account/login", nav: false, title: "Inloggen" }
        ]);

        this.router = router;        
    }
}

ic-app.js - 登录用户的root

import {useView, inject} from "aurelia-framework";
import {RequestStatusService} from "./services/request-status-service";
import AuthService from "./services/auth-service";

@useView("app.html")
@inject(RequestStatusService, AuthService)
export class App {
    constructor(requestStatusService, authService) {
        this.requestStatusService = requestStatusService;
        this.auth = authService; // we use it to bind it to the nav-bar-top
    }

    configureRouter(config, router) {
        config.title = "Super Secret Project";
        config.options.pushState = true;
        config.map([
            { route: ["", "selecteer-school"], moduleId: "ic/select-school", nav: false, title: "Selecteer School" },
            { route: "dashboard", moduleId: "ic/dashboard", nav: true, title: "Beginscherm" },
        ]);

        this.router = router;
    }
}

auth-service.js上的登录代码

logIn(userData, rememberMe = false) {
    this.requestStatusService.isRequesting = true;
    return this.http
        .fetch("/token", { method: "POST", body: userData })
        .then((response) => response.json())
        .then(response => {
            if (response.access_token) {
                this.setAccessToken(response.access_token, response.userName, rememberMe);
                this.app.setRoot("ic-app");
            }
        });
}

和...

注销auth-service.js中的代码

logOff() {
    AuthService.clearAccessToken();
    this.app.setRoot("index");
}

问题

设置不同的应用程序根工作正常,问题是我希望新的应用程序根目录自动导航到新根的默认路由,它会尝试加载当前setRoot(...)正在调用的路由.

举例说明,

1. 我在登录页面上. current route: /inloggen
2. 我单击登录按钮. app.setRoot("ic-app") is called
3. 新根加载; configureRouter在ic-app.js中调用,然后......
4. 控制台错误: Route not found: /inloggen

新的root尝试保持相同的/inloggen路由,但我希望它加载或导航到该app根的默认路由.退出时也会发生同样的情况.

如何在更改root后强制应用程序导航到默认路由？

Answer 1

我得到了这个工作得很好,我回答了更多关于如何在这个stackoverflow线程:

使用setRoot切换到其他应用程序时,Aurelia清除路线历史记录

基本上做以下几点

this.router.navigate('/', { replace: true, trigger: false });
this.router.reset();
this.router.deactivate();

this.aurelia.setRoot('app');

Answer 2

在匿名用户的路由器中使用mapUnknownRoutes.像这样:

configureRouter(config, router) {
    config.title = "Super Secret Project";
    config.options.pushState = true;
    config.map([
        { route: ["","home"], moduleId: "home", nav: true, title: "Beginscherm" },
        { route: "over", moduleId: "about", nav: true, title: "Over" },
        { route: "inloggen", moduleId: "account/login", nav: false, title: "Inloggen" }
    ]);

     config.mapUnknownRoutes(instruction => {
       //check instruction.fragment
       //return moduleId
       return 'account/login'; //or home
     });

    this.router = router;        
}

在其他路由器中执行相同的策略.现在,尝试注销并再次登录,您将看到用户将被重定向到他的最后一个屏幕.

编辑

另一种解决方案是在设置rootComponent后重定向到所需的路由.例如:

logOut() {
   this.aurelia.setRoot('./app')
    .then((aurelia) => {
      aurelia.root.viewModel.router.navigateToRoute('login');
    }); 
}

这是一个运行示例https://gist.run/?id=323b64c7424f7bec9bda02fe2778f7fc