# User login and route change at the same time

**URL:** <https://forums.bitovi.com/t/user-login-and-route-change-at-the-same-time/954>\
**Category:** CanJS\
**Created:** [August 23, 2018, 6:34pm UTC](https://forums.bitovi.com/t/user-login-and-route-change-at-the-same-time/954 "2018-08-23T18:34:57Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![pYr0x](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.bitovi.com/pyr0x/32/95_2.png) [@pYr0x](https://forums.bitovi.com/u/pYr0x)\
**Post date:** [August 23, 2018, 6:34pm UTC](https://forums.bitovi.com/t/user-login-and-route-change-at-the-same-time/954/1 "2018-08-23T18:34:57Z")

</div>

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](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

```auto
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](https://canada1.discourse-cdn.com/flex035/uploads/donejs/original/1X/6ec3a44c8722ff331f2d10fd58277ad1e60cc3c8.gif)

my stache file looks like:

```auto
{{#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}}

```

---

<div class="post-metadata">

**Author:** ![phillipskevin](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.bitovi.com/phillipskevin/32/102_2.png) [@phillipskevin](https://forums.bitovi.com/u/phillipskevin)\
**Post date:** [August 24, 2018, 7:19pm UTC](https://forums.bitovi.com/t/user-login-and-route-change-at-the-same-time/954/2 "2018-08-24T19:19:52Z")

</div>

@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:

```auto
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({
                    // ...
                });
            });
    }
}

```