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

Question

更新

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

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

我在其他Aurelia应用程序中实现了应用程序根based on the approach in this answer的分支。当login模块是＆＃34;隔离的＆＃34;没有其他路线的模块，但我现在很难让它上班。

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. 加载新根;调用ic-app.js中的configureRouter，然后......
4. 控制台错误：Route not found: /inloggen

新root尝试保留在同一/inloggen路由中，但我希望它能够加载或导航到该应用根目录的默认路由。 退出时也是如此。

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

Answer 1

我的工作很棒，我在这个stackoverflow线程中回答了更多关于如何：

Aurelia clear route history when switching to other app using setRoot

基本上做以下

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

Answer 3

我的最佳做法是将它们直接引导到那里，这就是我在我的应用程序中所做的事情：

login(username, password) {
  this.auth.login(username, password)
    .then(() => {
      this.aurelia.setRoot('app');
      location.hash = '#/';
    });
}