javascript - 奥里利亚导航管道

Question

我关注了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。那永远不会被调用。我错过了什么...？

我确实知道所有导航步骤都是由容器注入(inject)的，因此您可以在构造函数中具有依赖项...

Answer 1

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

因此要添加的管道步骤的名称非常重要。我的代码中的 Authorise 是错误的，这就是为什么“中间件”没有被拾取的原因。

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

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