导航管道 Aurelia

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

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

Answer 1

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

所以要添加的管道步骤的名称非常重要。 Authorise 在我的代码中是错误的，这就是 "middleware" 没有被拾取的原因。

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

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

导航管道 Aurelia

Navigation Pipeline Aurelia

javascript

aurelia