User login and route change at the same time

CanJS
1

i have a webpage that has a login and an interal area.
i use bitballs approach to login in a user https://github.com/donejs/bitballs/blob/master/public/components/navigation/navigation.js#L86

  • create a session
  • save that session on the app state

while the user is going to login in (session creation) the route should change to the internal areas.
i do this be changing the route data like route.data.update({dashboard: "logistics"});
the apps routes are

route.register("{page}", {page: "login"});
route.register("dashboard/{dashboard}");

the problem is if i update the route like above and setting the session in a batch, the route will not reflect the changes and route.currentRoute() will be still {page}. therefore the internal area will not load because i check against if(route.currentRule().indexOf("dashboard") >= 0)

here is a demo that shows the behavior

login
login.gif1159×943 709 KB

my stache file looks like:

{{#unless(isLoggedIn)}}
    <x-login app:from="this" title:to="title"></x-login>
{{else}}

    <!--UI-->
    <div class="wrapper">
        <!--header-->
        <div id="header">
            <can-dynamic-import from="~/components/hamburger-menu.component">
                {{#if isResolved}}
                <x-hamburger-menu session:bind="scope.vm.session"></x-hamburger-menu>
                {{/if}}
            </can-dynamic-import>
        </div>

        <!--content-->
        <div id="content">
        {{# if(componentToShow.isPending) }}
            Loading...
        {{/ if}}

        {{# if(componentToShow.isRejected) }}
            <four-0-four title:to="title"></four-0-four>
        {{/ if}}

        {{# if(componentToShow.isResolved) }}
            {{componentToShow.value}}
        {{/ if }}
        </div>
    </div>
{{/unless}}
2

@pYr0x instead of setting the default dashboard property when you log in, can you make it so the component to show is derived from the dashboard as well as the isLoggedIn state?

I would try to do something like this:

ViewModel: {
    dashboard: { default: "logistics" },

    get componentName() {
        if (!this.isLoggedIn) {
            return "login";
        }

        return this.dashboard;
    },

    get componentToShow() {
        return steal.import(`/components/dashboards/${this.componentName}/`)
            .then(({ default: ComponentConstructor }) => {
                return ComponentConstructor({
                    // ...
                });
            });
    }
}