CODEWITHSUNDEEP
javascriptsingle-page-applicationdurandal-2.0durandal-navigation
Eugene
Eugene

Reputation: 9

Durandal: how to call CanActivate() method

I am using HotTowel SPA template (with Durandal 2.0), and I am implementing the navigation based on user's credentials. For example, if user is a member of a particular domain group, he is allowed to see all the views, if not, only one view and so forth.

To do that, I build routes to pass to router based on the result of an Ajax call to server.

Here is my shell.js script:

define(['durandal/system', 'plugins/router', 'services/logger', 'services/config'],
function (system, router, logger, config) {

    var accessParameter;
    var URLPrefix = config.URLPrefix;       
    var getMenuJsonURL = URLPrefix ;

    var shell = {            
        activate: activate,
        router: router
    };

    return shell;


    //#region Internal Methods
    function activate() {
        return boot();
    }

    function boot() {
        function callMenuParameter() {
            var httpRequest = new XMLHttpRequest();
            httpRequest.open('GET', getMenuJsonURL,false); //"false" states "async:false". Very important! 
            httpRequest.send();
            return httpRequest.responseText;
        }

        var result = callMenuParameter(); 
        var parsedData = JSON.parse(result);
        var menuParameter = parsedData.menuNbr; //it is the parameter that I need.
        log('Entry form Loaded', null, true);

        router.on('router:route:not-found', function (fragment) {
            logError('No Route Found', fragment, true);
        });

        var routesToPass;

        if (menuParameter == 1)
            routesToPass = [

            { route: '', moduleId: 'bstrp', title: 'Statement', nav: 1 },

            ];
        else if(menuParameter == 2)
            routesToPass = [

           { route: '', moduleId: 'home', title: menuParameter, nav: 1 },
           { route: 'bstrp', moduleId: 'bstrp', title: 'Statement', nav: 4 }];
        else

            routesToPass = [

          { route: '', moduleId: 'home', title: 'SomethingEsle', nav: 1 },
          { route: 'bstrp', moduleId: 'bstrp', title: 'Statement', nav: 4 }];

        return router.makeRelative({ moduleId: 'viewmodels' }) // router will look here for viewmodels by convention

            .map(routesToPass)
            .buildNavigationModel() // Finds all nav routes and readies them
            .activate();            // Activate the router


    }

    function log(msg, data, showToast) {
        logger.log(msg, data, system.getModuleId(shell), showToast);
    }

    function logError(msg, data, showToast) {
        logger.logError(msg, data, system.getModuleId(shell), showToast);
    }
    //#endregion
});

This works. However, I also want to redirect the user away from the application if he does't belong there (the parameter from the ajax call returns "0"). I read documentation, and it says that I can use canActivate() function, something like

function canActivateItem()
{
  if (preMenuParameter == 0)
     return { redirect: 'http://cnn.com' };
  return true;
}

My problem is I can't understand where this function should be set in order to get called? It is not in router.js, and not in activate.js. I am really confused. Could you point me to the right direction?

Best regards,

Eugene

Upvotes: 1

Views: 1140

Answers (1)

al_amanat
al_amanat

Reputation: 615

You have to define canActivate method in your shell.js. For example:

define(['durandal/system', 'plugins/router', 'services/logger', 'services/config'], 
    function (system, router, logger, config) { 
        function activate() {
            //... some code there
        }

        function canActivate() {

            var result = callMenuParameter(); 
            var parsedData = JSON.parse(result);
            var menuParameter = parsedData.menuNbr; 
            if (menuParameter == 0) {
                window.location.href = 'http://somesite.com';
                return false;
            }

            // I suggest to place router initialization code here...

            return true;
        }

        var shell = {
            activate: activate,
            canActivate: canActivate,
            router: router
        };

        return shell;
    }

You can see article below for additional information and some technical details: http://durandaljs.com/documentation/Hooking-Lifecycle-Callbacks.html

Upvotes: 0

Related Questions