AuthFilter issue

[izderadicka]

Got this after I add another bindings to page that already worked ( if.bind). Not exactly sure where is problem

Uncaught (in promise) TypeError: Cannot read property 'filter' of undefined
    at AuthFilterValueConverter.toView (http://localhost:9000/jspm_packages/npm/[email protected]/auth-filter.js:21:20)
    at ValueConverter.evaluate (http://localhost:9000/jspm_packages/npm/[email protected]/aurelia-binding.js:1297:33)
    at Binding.bind (http://localhost:9000/jspm_packages/npm/[email protected]/aurelia-binding.js:4762:41)
    at Controller.bind (http://localhost:9000/jspm_packages/npm/[email protected]/aurelia-templating.js:2879:19)
    at View.bind (http://localhost:9000/jspm_packages/npm/[email protected]/aurelia-templating.js:923:24)
    at Controller.bind (http://localhost:9000/jspm_packages/npm/[email protected]/aurelia-templating.js:2900:19)
    at View.bind (http://localhost:9000/jspm_packages/npm/[email protected]/aurelia-templating.js:923:24)
    at Controller.bind (http://localhost:9000/jspm_packages/npm/[email protected]/aurelia-templating.js:2900:19)
    at Controller.automate (http://localhost:9000/jspm_packages/npm/[email protected]/aurelia-templating.js:2846:12)
    at http://localhost:9000/jspm_packages/npm/[email protected]/aurelia-templating.js:3874:20toView @ auth-filter.js:21evaluate @ aurelia-binding.js:1297bind @ aurelia-binding.js:4762bind @ aurelia-templating.js:2879bind @ aurelia-templating.js:923bind @ aurelia-templating.js:2900bind @ aurelia-templating.js:923bind @ aurelia-templating.js:2900automate @ aurelia-templating.js:2846(anonymous function) @ aurelia-templating.js:3874Promise.resolve (async)importViewResources @ aurelia-templating.js:2744loadTemplateResources @ aurelia-templating.js:2714(anonymous function) @ aurelia-templating.js:2683Promise.resolve (async)h @ system.src.js:4597(anonymous function) @ system.src.js:4597Promise.resolve (async)(anonymous function) @ system.src.js:4597(anonymous function) @ system.src.js:4597Promise.resolve (async)(anonymous function) @ system.src.js:4597(anonymous function) @ system.src.js:4597(anonymous function) @ system.src.js:4597(anonymous function) @ system.src.js:4597(anonymous function) @ system.src.js:4597

[paulvanbladel]

Hi Ivan,
Can you provide more precise steps for reproducing the problem.
BTW, I like your blog. Very nice.
Cheers

[izderadicka]

Hi Paul,

this is the app.html:

<template>
  <require from="components/nav-bar"></require>
  <require from="bootstrap/css/bootstrap.css"></require>
  <require from="bootstrap-drawer/dist/css/bootstrap-drawer.css"></require>

  <nav-bar router.bind="router" do-search.bind="doSearch"></nav-bar>

  <div class="page-host has-drawer">
    <div id="drawer-notifications" class="drawer drawer-right dw-xs-10 dw-sm-6 dw-md-4 fold" aria-labelledby="drawer-notifications">
        <div class="drawer-controls notifications-btn">
            <a href="#drawer-notifications" data-toggle="drawer" aria-foldedopen="false"
            aria-controls="drawer-notifications"><i class="fa fa-comment" aria-hidden="true"></i></a>
        </div>
        <div class="drawer-contents">
            <div class="drawer-heading">
                <h2 class="drawer-title">Notifications</h2>
            </div>

            <ul class="drawer-nav">
                <li repeat.for="n of notif.items" role="presentation">
                <a data-toggle="drawer" data-target="#drawer-notifications" href="#">${n.text} ${n.args[0]}</a></li>

            </ul>

        </div>
    </div>
    <router-view></router-view>
  </div>
</template>

and app.js:

import { FetchConfig, AuthorizeStep} from 'aurelia-auth';
import {inject,LogManager,bindable} from 'aurelia-framework';
import { HttpClient} from 'aurelia-fetch-client';
import {Configure} from 'lib/config/index';
import {Notification} from 'lib/notification';
import {WSClient} from 'lib/ws-client';
import {Access} from 'lib/access';

const logger = LogManager.getLogger('app');
@inject(Configure, FetchConfig, HttpClient, WSClient, Notification, Access)
export class App {
  constructor(config, fetchConfig, client, wsClient, notif, access) {
    this.config = config;
    this.notif=notif;
    this.access=access;
    fetchConfig.configure();
    client.configure(conf => conf
      .withBaseUrl(`http://${this.config.get('api.hostname',window.location.hostname)}:${this.config.get('api.port')}`)

      .withInterceptor({
        response: response => {
          if (response && response.status == 401) {
            logger.warn('Not authenticated!');
            this.router.navigateToRoute('login');
            throw new Error('Not autherticated!');

          }
          return response;
        }
      })
    );

  }

  configureRouter(config, router) {
    config.title = 'MyBookshelf2';
    config.addPipelineStep('authorize', AuthorizeStep);
    config.map([{
        route: ['', 'welcome'],
        name: 'welcome',
        moduleId: 'pages/welcome',
        nav: true,
        title: 'Welcome'
      }, {
        route: 'ebooks',
        name: 'ebooks',
        moduleId: 'pages/ebooks',
        nav: true,
        title: 'Ebooks',
        auth: true
      }, {
        route: 'login',
        name: 'login',
        moduleId: 'pages/login',
        title: 'Login'
      }, {
        route: 'ebook/:id',
        name: 'ebook',
        moduleId: 'pages/ebook',
        title: 'Ebook',
        auth: true
      }, {
        route: 'search/:query',
        name: 'search',
        moduleId: 'pages/search',
        title: 'Search Results',
        auth: true
      }, {
        route: ['author/:id'],
        name: 'author',
        moduleId: 'pages/author',
        title: 'Authors books',
        auth: true
      }

    ]);

    this.router = router;
  }

  activate() {
    this.access.signalState();
  }

  isAuthenticated() {
    return this.access.authenticated;
  }

  doSearch(query) {
    this.router.navigateToRoute('search', {
      query: encodeURIComponent(query)
    });
  }
}

they work - however if I just modify this line in html (root of drawer element):

  <div  class="page-host has-drawer">

to this :

  <div  if.bind="1" class="page-host has-drawer">

got error above - does not depend on where if.bind is bound - so using trivial case, which still leads to error. I'm not expert in aurelia - this looks like some race condition - that filter is called before routes are initalized?