javascript - Aurelia - 等待在路由器预渲染步骤中返回的 promise

Question

TL;DR - 如何延迟 aurelia-router.js 中的 ProcessResult() 函数执行，因为我仍然在我的代码中等待 promise 的结果？它会导致正确的模块呈现，但地址/href 错误。

示例:如果您在 base-module 上，然后单击 admin，admin 模块将加载，但 href 仍然是 www.mycompany.com/#/base-module 而不是 www.mycompany.com/#/admin，并且可以在控制台中看到此错误:

ERROR [app-router] Error: Expected router pipeline to return a navigation result, but got [{}] instead

更长的版本:

我的路由器中有一个预呈现步骤，用于在呈现 View 之前检查用户是否启用了特定模块。

在我的 PreRenderStep 类中，我有一个运行函数，它调用一个调解器来获取用户的权限，然后检查用户单击的模块是否在其启用的模块列表中。调解员的电话涉及 promise 。

问题是预呈现步骤中的运行 promise 在运行方法中的 promise 完成之前解决。因此， View 最终被呈现(因为用户已启用)但之前的 href 仍保留在地址栏中。

路由器:

 configureRouter(config, router) {
        config.title = "Tramonex";
        config.addPipelineStep('authorize', AuthorizeStep);
        config.addPreRenderStep(PreRenderStep);
        config.map([
            {
                route: ['', 'log-in-out'],
                name: 'home',
                moduleId: 'modules/authentication/log-in-out'
            },
            {
                route: 'passwordReset',
                moduleId: 'modules/authentication/password-reset',
            },
            {route: 'app', moduleId: 'app', auth: true},
            {
                route: 'base-module',
                name: 'base-module',
                moduleId: 'modules/base-module',
                href: 'base-module',
                nav: true,
                auth: true
            },
            {
                route: 'test1',
                name: 'test1',
                moduleId: 'modules/test1/test1',
                href: 'test1',
                nav: true,
                auth: true,
                settings: {moduleAuthRequired: true}

            },
            {
                route: 'test2',
                name: 'test2',
                moduleId: 'modules/test2/test2',
                href: 'test2',
                nav: true,
                auth: true,
                settings: {moduleAuthRequired: true}
            },
            {
                route: 'admin',
                name: 'admin',
                moduleId: 'modules/admin/admin',
                href: 'admin',
                nav: true,
                auth: true,
                settings: {moduleAuthRequired: true}
            },
        ]);

        this.router = router;
    }
}

预渲染步骤:

@inject(Mediator, AuthenticationService)
class PreRenderStep {

    constructor(mediator, authenticationService) {
        this.mediator = mediator;
        this.authenticationService = authenticationService;
    }

    run(navigationInstruction, next) {
       
        if (navigationInstruction.getAllInstructions().some(i => i.config.settings.moduleAuthRequired)) {

            this.redirect = false;
            this.mediator.getPermissionsForUser()
                .then(user => {
                    userPerms = user.modules;
                    var isEnabled = userPerms.includes(navigationInstruction.config.name);
                    if (!isEnabled) {
                        this.redirect = true;
                    }
                })
                .then(() => {
                    return this.redirect next.cancel(navigationInstruction.router.navigateToRoute('base-module')) : next();
                });
        }
        else {
            return next();
        }
    }
}

当用户单击需要身份验证检查的模块时，代码被命中，而当我们等待 mediator.getPermissionsForUser() 返回的 promise 时，aurelia-router.js 中的这段代码被命中(带星号的线条):

function processResult(instruction, result, instructionCount, router) {
  if (!(result && 'completed' in result && 'output' in result)) {
    result = result || {};
    **result.output = new Error('Expected router pipeline to return a navigation result, but got [' + JSON.stringify(result) + '] instead.');**
  }

  var finalResult = null;
  if (isNavigationCommand(result.output)) {
    result.output.navigate(router);
  } else {
    finalResult = result;

    if (!result.completed) {
      if (result.output instanceof Error) {
        logger.error(result.output);
      }

      **restorePreviousLocation(router);**
    }
  }

Answer 1

您需要返回您在运行函数中创建的 promise 。

return this.mediator.getPermissionsForUser()