如何使用具有与shell不同的布局的Durandal单独登录页面?

时间:2014-09-04 23:16:51

标签: durandal durandal-2.0 durandal-navigation

我已经阅读了Durandal login page redirect pattern哇,很多代码可以做我认为非常简单的事情。

我也通过https://groups.google.com/forum/#!topic/durandaljs/RdGpwIm1oOU阅读,因为我希望登录页面上有一个带登录表单的简单徽标,但我也喜欢路由注册和关于页面也是如此。我的网站的其余部分将有一个菜单,标题等,我不想在用户登录之前显示。此外,我不确定这种方法在用户登录时会如何更新。

另一个几乎完成我想做的代码示例:https://github.com/Useful-Software-Solutions-Ltd/Durandal451/blob/master/Durandal451v2/App/global/session.js

那么,我该怎么办?有正式的方法吗?似乎人们已经尝试过各种各样的混合物。我认为这将是一个非常常见的事情,但无法在主要文档中找到任何内容。

1 个答案:

答案 0 :(得分:1)

我不确定这是最简单的方法,但这就是我得到的

在触发app.start()之后,你需要添加一些额外的功能。

<强> main.js

var auth = require('authentication'); // Authentication module

app.start().then(function()
{
   // This function will wait for the promise
   auth.init().then(function(data)
   {
      // When successfully authenticate, set the root to shell 
      app.setRoot('views/shell');
   }
});

<强> authentication.js

define(function(require)
{
  var app = require('durandal/app');

  return {
     init: function()
     {
        // Initialize authentication...

        return system.defer(function(dfd)
        {
            // Check if user is authenticate or if there has stored token
            var isAuthenticate = someOtherFunctiontoCheck();

            if (isAuthenticate)
            {
               dfd.resolve(true); // return promise
            }
            else
            {
               // When not authenticate, set root to login page
               app.setRoot('views/login');
            }
        }
     }
  };
});
祝你好运! :)

<强>更新

<强> login.js

define(function(require)
{
   var ko = require('knockout');
   var auth = require('authentication');   

   var username = ko.observable();
   var password = ko.observable();

   return {
      username: username,
      password: password,
      submitForm: function()
      {
         // Do a login, if success, auth module will take care of it
         // and here will take of the error 
         auth.login(username(), password()).error(function()
         {
             // notify user about the error (e.g invalid credentials)
         });
      }
   };
});

<强> Authentication.js

define(function(require)
{
  var app = require('durandal/app');

  return {
     init: function()
     {
        // Initialize authentication...

        return system.defer(function(dfd)
        {
            // Check if user is authenticate or if there has stored token
            var isAuthenticate = someOtherFunctiontoCheck();

            if (isAuthenticate)
            {
               dfd.resolve(true); // return promise
            }
            else
            {
               // When not authenticate, set root to login page
               app.setRoot('views/login');
            }
        }
     },
     login: function(username, password)
     {
        // do authenticate for login credentials (e.g for retrieve auth token)
        return $.ajax({
            url  : 'api/login',
            type : 'POST',
            data : {
               username: username,
               password: password
            }
        }).then(function(token){
            // on success, stored token and set root to shell
            functionToStoreToken(token);

            // Set root to shell
            app.setRoot('views/shell');
        });
     }
  };
});