Question

我遇到的问题是我的aurelia应用程序没有显示绑定用户是否登录的特定导航项。它让我发疯，我希望这里有人可以提供帮助。

我有 app.js 和 app.html ，其中包含登录代码（使用Auth0）。请参阅下文，我尽可能彻底地评论。

app.js

// I've imported a couple of stuff here for the code below to work
export class App {
    lock = new Auth0Lock('XXXXXXXX');
    isAuthenticated = false;

    constructor(http, router) {
        this.http = http;
        this.router = router;

        this.router.configure(config => {
            config.title = 'Sample App';
            config.map([
                {
                    route: ['', 'welcome'],
                    name: 'welcome',
                    moduleId: 'welcome',
                    nav: true,
                    title: 'Welcome',
                    settings: {
                        icon: 'fa-home'
                    }
                },
                {
                    route: ['form'],
                    name: 'form',
                    moduleId: 'form',
                    nav: false,
                    title: 'Provide your Details',
                    settings: {
                        icon: 'fa-user'
                    }
                }
            ]);
            config.mapUnknownRoutes({redirect: '#/'});
        });

        http.configure(config => {
            config
                .useStandardConfiguration()
        });

        this.isAuthenticated = tokenIsExpired() ? false : true; // checks whether the token from Auth0 is expired or still valid
    };

    login() {
        // If the user is successful, the code below gets executed
        this.isAuthenticated = true;
        this.router.navigate('form'); // When the user logs in, they go to the page "form"
    }

    logout() {
        // Logout Code
    }
}

navbar.js

import {bindable} from 'aurelia-framework';
import {tokenIsExpired} from 'tokenUtils'; // tokenUtils is a js which checks for expired tokens

@inject(Router)

export class NavBar {
    @bindable router = null
    isAuthenticated = false;

    constructor(router) {
        this.isAuthenticated = tokenIsExpired() ? false : true;
    }
}

navbar.html

<template>
    <nav class="navbar navbar-default navbar-fixed-top" role="navigation">
        <div class="container">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse"
                        data-target="#skeleton-navigation-navbar-collapse">
                    <span class="sr-only">Toggle Navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="#">
                    <!--<i class="fa fa-home"></i>
                    <span>${router.title}</span>-->
                    <img src="img/header-logo.png" height="60">
                </a>
            </div>

            <div id="navbar" class="collapse navbar-collapse">
                // Navbar left works well

                <ul class="nav navbar-nav navbar-right">
                    <li if.bind="isAuthenticated">
                        <a href="#">
                            <img src="${profilePicture}" class="nav-profile-picture img-circle">
                            Hello, <span class="user-nav-name">${userName}</span>
                        </a>
                    </li>
                    <li if.bind="isAuthenticated">
                        <a href="#" click.trigger="logout()">
                            <i class="fa fa-sign-out"></i> Logout</span>
                        </a>
                    </li>
                    <li class="loader" if.bind="router.isNavigating">
                        <i class="fa fa-circle-o-notch fa-spin fa-2x"></i>
                    </li>
                </ul>
            </div>
        </div>
    </nav>
</template>

从上面的代码可以看出，当有人点击 app.html 文件中的登录信息时，他们会通过Auth0验证，一旦成功，就会被重定向到“表单”页面。但是，一旦用户被重定向，他们就无法看到与isAuthenticated绑定的链接。仅当我重新加载页面时才会显示链接。

我不知道自己做错了什么，我希望得到这方面的指导。谢谢你的时间!!!

Answer 1

问题是navBar的函数tokenIsExpired()只被调用一次。因此，navBar的isAuthenticated没有更新。这就是DOM没有更新的原因。

要解决此问题，请创建另一个可绑定属性以告知导航栏用户是否已登录。例如：

export class NavBar {
    @bindable router;
    @bindable isAuthenticated;

    //remove the old constructor
}

现在，在您的App html中，将isAuthenticated绑定到NavBar：

<nav-bar router.bind="router" is-authenticated.bind="isAuthenticated"></nav-bar>

希望这有帮助！

使用＆＃34;绑定＆＃34;导航项目导航到路线后没有显示

1 个答案: