导航管道 Aurelia答案

【问题标题】：Navigation Pipeline Aurelia导航管道 Aurelia
【发布时间】：2016-02-27 00:36:52
【问题描述】：

我遵循Aurelia documentation 关于添加导航管道步骤的信息。

我已经创建了我的 Auth 服务和 AuthRouterPipelineStep：

import {inject} from 'aurelia-framework';
import {HttpClient} from 'aurelia-fetch-client';
import 'fetch';
import {Router} from 'aurelia-router';
import {AuthResult} from './authResult';
import {Redirect} from 'aurelia-router';

@inject(HttpClient, Router)
export class Auth {
    constructor(httpClient, router) {
        this.httpClient = httpClient;
        this.router = router;
        this.internalIsLoggedIn = false;
    }

    login(username, password) {

        if (username === "callum" && password === "password") {
            this.router.navigate('products');

            this.internalIsLoggedIn = true;
        }

        return new AuthResult("Unable to login.");
    }

    get isLoggedIn() { return this.internalIsLoggedIn; }
}

@inject(Auth)
export class AuthRouterPipelineStep {
    constructor(auth) {
        this.auth = auth;
    }

    run(navigationInstruction, next) {
        console.log("Navigating");
        if (navigationInstruction
                .getAllInstructions()
                .some(i => i.config.settings.roles.indexOf('public') === -1)) 
        {
            var isLoggedIn = this.auth.isLoggedIn;
            if (!isLoggedIn) {
                return next.cancel(new Redirect('welcome'));
            }
        }

        return next();
    }
}

在我的应用程序中我已经全部配置好了：

import {Auth, AuthRouterPipelineStep} from './auth/auth';
import {inject} from 'aurelia-framework';
import {Redirect} from 'aurelia-router';

@inject(Auth)
export class App {
    constructor(auth) {
        this.auth = auth;
    }

    get isLoggedIn() { return this.auth.isLoggedIn; }

    configureRouter(config, router) {
        config.title = 'Reaper';
        config.addPipelineStep('authorise', AuthRouterPipelineStep);
        config.map([
            { route: ['', 'welcome'], name: 'welcome',      moduleId: 'welcome',           nav: true, title: 'Home',      settings: { icon: 'fa-home', roles: ['public'] } },
            { route: 'contacts',      name: 'contacts',     moduleId: './contacts/index',  nav: true, title: 'Contacts',  settings: { icon: 'fa-' } },
            { route: 'companies',     name: 'companies',    moduleId: './companies/index', nav: true, title: 'Companies', settings: { icon: 'fa-' } },
            { route: 'products',      name: 'products',     moduleId: './products/index',  nav: true, title: 'Products',  settings: { icon: 'fa-' } }
        ]);

        this.router = router;
    }
}

我在导航管道步骤Run 函数上有一个console.log。那永远不会被调用。我错过了什么……？

我确实知道所有导航步骤都是由容器注入的，所以你可以在构造函数中有依赖...

【问题讨论】：

标签： javascript aurelia

【解决方案1】：

从 Aurelia Beta 1 开始。导航管道中有几个钩子。一个是authorize，另一个是modelbind。

所以要添加的管道步骤的名称非常重要。 Authorise 在我的代码中是错误的，这就是为什么“中间件”没有被选中。

但是，您可以堆叠中间件，它会按顺序运行：

config.addPipelineStep('authorize', AuthRouterPipelineStep);
config.addPipelineStep('authorize', AnotherAuthRouterPipelineStep);

【讨论】：