Dynamic routes only set when page is refreshed

[guivr]

I'm submitting a bug report

• Library Version:
  "aurelia-router": "npm:aurelia-router@^1.0.0-beta.1.1.1",

Please tell us about your environment:

• Operating System:
  OSX 10.10.4 & Linux Ubuntu
• Node Version:
  5.2.0
• NPM Version:
  3.3.12
• JSPM OR Webpack AND Version
  JSPM 0.16.15
• Browser:
  Chrome 54.0.2840.59 (64 bit)
• Language:
  ESNext

Current behavior:
I'm trying to use dynamic router configuration. I have the following files:

adminRoutes.js:

export const adminRoutes = [
  { 
    route: 'geral', 
    name: 'geral',   
    moduleId: 'views/admin/logado/index',    
    nav: true, 
    title: 'Admin logado'
  }
];

app.js

this.subscription = this.bindingEngine.propertyObserver(this, 'isAuthenticated')
      .subscribe((newValue, oldValue) => {
        if (this.isAuthenticated) {
          this.authService.getMe().then(data => {
            this.user = data.user;
            this.appRouterConfig.configure(this.isAuthenticated, this.user);
            this.router.navigateToRoute('geral', {}, {replace: true});
          });
        } else {
          this.appRouterConfig.configure(this.isAuthenticated, this.user);
        }
      });

app.router.config.js

configure(isAuthenticated, user) {
    var appRouterConfig = (config) => {
      config.title = 'meu.guru';
      config.addPipelineStep('authorize', AuthorizeStep);

      this.refreshRoutes = true;

      if (isAuthenticated === false) {
        config.map(defaultRoutes);
      } else {
        switch(user.role) {
          case "ADMIN":
            config.map(adminRoutes);
            break;
          case "PRINCIPAL":
            config.map(principalRoutes);
            break;
        }
      }
    }

    this.router.configure(appRouterConfig);
  }

When this.router.navigateToRoute('geral', {}, {replace: true}); is called, I get the following error:
aurelia-router.js:854 Uncaught (in promise) Error: A route with name 'geral' could not be found. Check thatname: 'geral'was specified in the route's config.(…)generate @ aurelia-router.js:854navigateToRoute @ aurelia-router.js:831(anonymous function) @ app.js:64

user.role verification is ok and config.map(adminRouters) is set after authentication.
The problem is that admin routes are only properly set if I refresh the page.

console.log(this.router.routes);

I already tried to get support on gitter (3 times) but no one knows why this is happening.
The only temporary solution I have is to do location.reload() so the routes can be refreshed.

[EisenbergEffect]

I can't really tell based on these fragments. We need a running sample that demonstrates this. It doesn't sound like your configuration is happening in time. Can you create a simplest possible reproduction?

[guivr]

Sure, @EisenbergEffect . Here it is: https://github.com/LeoNero/aurelia-router-issue
There's the client and the server folder in this repository. Remember to turn on both client and server to make sure the login works.

P.S: to login, go to route #/admin and use any user and password. You'll see that you have to refresh the page and reload the aurelia, because navigateToRoute is not working. Maybe some feature that allow us to reload the whole router hierarchy would be really helpful (as seem in #201).

[guivr]

Found out that if you put a setTimeOut of 5000ms in console.log(this.router.routes) it changes, it seems like the routes are being setted after the API result of (this.appRouterConfig.configure(this.isAuthenticated, this.user);)

Based on this, I tried something like:

if (this.isAuthenticated) {
          this.authService.getMe().then(data => {
            this.user = data.user;
            this.router.reset();
            this.appRouterConfig.configure(this.isAuthenticated, this.user);
            setTimeout(()=>console.log('Rotas atuais', this.router.routes), 5000);
            var _this = this;
            setTimeout(function(){
              console.log(_this.router.routes);
              _this.router.navigateToRoute('geral', {}, {replace: true});
            }, 5000);
          });
        }

[app.js fragment]

Now navigateToRoute() does not returns any error, but nothing happens on the page too.

[LeoNero]

@EisenbergEffect Do you have any idea what can be done to solve the problem?

[davismj]

@LeoNero @guivr Though this doesn't directly solve the issue here, I highly recommending going a different direction for the authentication case. Since a login page is for all intents and purposes both different and separate from your main application page, I recommend implementing your login page as a completely different root.

I've written a blog post about this here: http://davismj.me/blog/aurelia-login-best-practices-pt-1/
I've written a (slightly out of date) demo app here: http://foursails.github.io/sentry/
Source code here: https://github.com/foursails/sentry

[Alexander-Taran]

Maybe can be closed