MVC认证kendoUI SPA

时间:2015-02-20 21:30:25

标签: javascript asp.net-mvc-4 kendo-ui requirejs single-page-application

我有一个使用Telerik的KendoUI javascript框架构建的单页面应用程序。页面从客户端路由器(样本和文档here)加载,javascript模块与RequireJS一起添加。我基于来自Dominick Baier的这篇文章添加了一些基于WIF会话认证模块(SAM)的认证机制:http://leastprivilege.com/2012/02/09/replacing-asp-net-forms-authentication-with-wif-session-authentication-for-the-better/它与Forms认证非常相似,因为我只是添加了一个带有这样的表单URL的认证标签:

<authentication mode="None">
  <forms loginUrl="~/#/Public/Accueil" timeout="90" slidingExpiration="true" requireSSL="true" />
</authentication>

它在正常的.NET MVC4场景下工作正常,但在使用javascript路由的SPA中也不能正常工作。用户未登录时显示视图,但相应的脚本不是因为当我点击&#34;登录&#34;时没有任何反应。按钮。

有没有人知道在服务器上发生登录页面重定向时我应该如何保持服务器和客户端之间的同步?

更新:

当您使用身份验证标记并指定表单URL时,每次在没有auth cookie的情况下调用需要授权的页面时,都会向客户端发送302响应。浏览器重定向的URL是在身份验证标记下的web.config中指定的URL(在我的问题中是&#34; base_url /#/ Public / Acceuil &#34;)并且请求原始请求的网址附加为如下参数:&#34; base_url /#/ Public / Acceuil?RETURNURL = Private / Profile < /强>&#34 ;.然后,浏览器向此新URL发出GET请求,并获取带有登录视图的200。这很好用。问题是客户端方法是在一个单独的js文件中,通常使用RequireJS通过客户端Kendo路由器加载:

router-config.js:

        define([
        'jquery',
        'lib/pubsub'
    ], function ($, pubsub) {

        // Index
        var publicAccueil =
        {
            url: "/Public/Accueil",
            activate: function () {
                var that = this;
                require(['app/Public/Accueil'], function () { renderView(that); });
            },
            html: null
        };

        // MDPOublie
        var publicMDPOublie =
        {
            url: "/Public/MDPOublie",
            activate: function () {
                var that = this;
                require(['app/Public/MDPOublie'], function () { renderView(that); });
            },
            html: null
        }; 
// Profil
var privateProfile =
{
    url: "/Private/Profile",
    activate: function () {
        var that = this;
        require(['app/Private/Profile'], function () { renderView(that); });
    },
    html: null
};
    var renderView = function(view, id, params) {
        $.publish("viewActivated", [ view, id, params ]);
    };

    return {
        publicAccueil: publicAccueil,
        publicMDPOublie: publicMDPOublie,
        privateProfile: privateProfile,
};
});

然后,在路由器文件中,路由被注册以调用&#34;激活&#34;配置对象中定义的功能&#34; routeConfig.privateProfile&#34;对于路线,这是什么加载Accueil.js文件位于unde&#34; app / Public /&#34;。

router.js:

define([
  'jquery',
  'kendo',
  'app/route-config',
  'app/Code52'
], function ($, kendo, routeConfig, Code52) {

    var router = new kendo.Router({
        routeMissing: function (e) { alert("Route not defined : " + e.url); },
        change: function (e) {

            kendo.destroy("#content");
        }
    });

    //Default route
    router.route("/", function() {
        var cheminUrl = window.location.pathname;

        if (cheminUrl === "/") {
            router.navigate(routeConfig.publicAccueil.url);
        }
    });

router.route(routeConfig.publicAccueil.url, function () { routeConfig.publicAccueil.activate(); });
        router.route(routeConfig.publicMDPOublie.url, function () { routeConfig.publicMDPOublie.activate(); });
    router.route(routeConfig.privateProfile.url, function () { routeConfig.privateProfile.activate(); });

//Rest of code ommited for brievty"

然后首次从服务器加载页面并缓存以供后续调用。这是似乎无法发挥作用的部分。将显示登录视图,但永远不会命中客户端路由器,因此不会加载javascript逻辑。

私有部分在web.config中定义,拒绝匿名用户访问路径下的每个视图&#34; 观看/私人&#34; :

<location path="Views/Private">
<system.web>
  <authorization>
    <deny users="?" />
    <!--this will restrict anonymous user access -->
  </authorization>
</system.web>

举个例子,如果我点击'#34;私人/个人资料&#34;通过点击我的收藏夹中的链接,我没有连接。因此路由器在router-config.js中加载为该页面定义的客户端脚本。浏览器获得302重定向到&#34; Public / Accueil&#39;但客户路由器从未被击中。所以&#34; app / Private / Profile.js&#34;文件永远不会被加载。

0 个答案:

没有答案