Aurelia-在具有不同路由配置的应用程序根目录之间切换 [英] Aurelia - Switching between app roots with different route configurations

问题描述

这个问题与亩问题有关吗? https://github.com/aurelia/framework/issues/400

Could this issue have something to do with mu problem? https://github.com/aurelia/framework/issues/400

我有一个 Aurelia 应用程序，该应用程序有两个不同的根，一个用于用户的登录名，另一个用于匿名用户.

I have an Aurelia application with two different roots, one for loggen in users, and another for anonymous users.

我在其他Aurelia应用程序中实现了应用程序根目录的更改

I have in other Aurelia apps implemented a chanaging of app root based on the approach in this answer. This works very well when the login module is an "isolated" module with no additional routes, but I'm having a hard time getting it to work now.

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-登录用户的根目录

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

和...

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

问题

设置不同的应用程序根目录可以按预期工作，问题是我希望新的应用程序根目录自动导航到新的根目录的默认路由，并尝试加载该位在setRoot(...)时刻被称为的路线.

The Problem

Setting the different app roots works as expected, the problem is that I would expect the new app root to automatically navigate to the default route of the new root, bit it tries to load the route it was on the moment setRoot(...) is called.

为了举例说明，

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

1. I'm on the login page. current route: /inloggen
2. I click the log in button. app.setRoot("ic-app") is called
3. New root is loaded; configureRouter in ic-app.js is called, and then...
4. Console error: Route not found: /inloggen

新的根目录尝试保留在相同的/inloggen路由中，但是我希望它加载或导航到该应用程序根目录的默认路由. 注销时也会发生同样的情况.

The new root tries to stay in the same /inloggen route, but I would like it to load, or navigate to, the default route for that app root. The same happens on logging out.

更改根目录后，如何强制应用导航到默认路由?

How can I force the app to navigate to the default route after changing root?

推荐答案

我的工作很棒，我在此stackoverflow线程中回答了更多有关如何操作的信息:

I got this working great, I answered more about how to in this stackoverflow thread:

Aurelia清除路由使用setRoot

基本上请执行以下操作

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

this.aurelia.setRoot('app');

这篇关于Aurelia-在具有不同路由配置的应用程序根目录之间切换的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！