How to activate modal view before any views activated

Question

I'm hooking the canActivate callback to load a login model/view. My welcome view shows the login dialog in the activate callback, which works just fine. I would like to block activation of all views with the login, rather than simply calling it after view activation. It seems like my login model/view won't load unless at least one other view is loaded. Once I load welcome, I can get the model to display fine when attempting to navigate to other views where it is hooked into canActivate.

Here's what it looks like in my welcome model:

self.activate = function () {
      if( session.token() == null){
          app.showDialog(new Login())
        }
    }

and what it looks like in my other models:

self.canActivate = function () {
      if( session.token() == null){
        return app.showDialog(new Login()).then(function(){
          return true;
        })      
      }
      else{
        return true;
      }
    }

The canActivate is returned a promise from the login dialog and only activates after the dialog closes itself on successful login. Can I show the dialog before activating any view?

What if you move the canActivate code into the activate function ? — Svakinn, Oct 30 '15 at 16:41

score 0 · Answer 1 · answered Oct 30 '15 at 17:02

What I would suggest is to use login page-viewmodel and route-redirect to it on each viewmodel canActivate (on views that require authentication) when not logged in. When this happens you save the current route to some global-app level variable. Then once logged in you redirect back to the view you where visiting first.

Example CanActivate (Typescript):

public canActivate(parms?: any): any {
    return this.doRequireLogin ? Q.resolve(this.app.requireLogin(this.modelId)) : true;
}

The app requireLogin example logic:

public requireLogin(moduleId: string): boolean {
    this.pageModuleId = moduleId;
    if (this.isLogedIn())
        return true;
    else {
        if (this.loginPageIdFrom == '' || this.loginPageIdFrom == this.cfg.startModule)
            this.loginPageIdFrom = moduleId;
        this.goLogIn();
        return false;
    }
}

The app goLogin example logic:

public goLogIn(): void {
    this.mainMenu().selectById(this.cfg.startModule);
    this.navigateTo(this.cfg.loginPage);
}

The app navigate example:

public navigateTo(routeId: string): boolean {
    var rr: string = routeId;
    if (rr == 'home') //Handle the fact that module home is routeid as '' (as Durandal default route)
        rr = '';
    return m_router.navigate(rr);
}

Where the m_router is the router module:

import m_router = require('plugins/router');

Finally in after the login takes place in the login viewmodel you use the app.navigateTo to go back to the original route.

How to activate modal view before any views activated

1 Answers1