我的 SPA 的某些区域需要对所有用户开放,而某些区域需要身份验证。在这些区域中,我要保护的是通过 AJAX 加载的数据。
我有一个身份验证服务(见下文),我将其作为依赖项添加到我的 durandal main.js 中。该服务称为:
authentication
在我的main.js 中,我调用
authentication.handleUnauthorizedAjaxRequest(function () {
app.showMessage('You are not authorized, please login')
.then(function () {
router.navigateTo('#/user/login');
});
});
它警告用户他们没有被授权,并将用户导航到登录视图/视图模型,他们可以在其中输入详细信息并尝试登录。
构建此身份验证视图模型时想到的一些问题:
- 我正在做的事情有什么明显的担忧吗?
- 这就是我“注定”在杜兰达尔做事的方式吗?
- 我在重新发明轮子吗?我在杜兰达尔身上看不到这样的东西。
大多数人似乎都在创建单独的 cshtml页面;一个用于登录(如果用户未通过身份验证),以及通常的index.cshtml是否有任何充分的理由让我切换到该方法?
我在服务器端“用户控制器”上的登录操作具有我需要发送的 [ValidateAntiForgeryToken] 属性。
我还有一个“防伪”服务(见下文),我还将它作为依赖项添加到我的main.js viewModel文件中(也在我的 main.js 中)。
antiforgery.addAntiForgeryTokenToAjaxRequests();
这会拦截所有 ajax 请求(连同内容),并将 MVC AntiForgeryToken 值添加到数据中。似乎完全按照我的意愿工作。如果有任何错误/错误,请告诉我。
下面完成认证服务。
// services/authentication.js
define(function (require) {
var system = require('durandal/system'),
app = require('durandal/app'),
router = require('durandal/plugins/router');
return {
handleUnauthorizedAjaxRequests: function (callback) {
if (!callback) {
return;
}
$(document).ajaxError(function (event, request, options) {
if (request.status === 401) {
callback();
}
});
},
canLogin: function () {
return true;
},
login: function (userInfo, navigateToUrl) {
if (!this.canLogin()) {
return system.defer(function (dfd) {
dfd.reject();
}).promise();
}
var jqxhr = $.post("/user/login", userInfo)
.done(function (data) {
if (data.success == true) {
if (!!navigateToUrl) {
router.navigateTo(navigateToUrl);
} else {
return true;
}
} else {
return data;
}
})
.fail(function (data) {
return data;
});
return jqxhr;
}
};
});
// services/antiforgery.js
define(function (require) {
var app = require('durandal/app');
return {
/* this intercepts all ajax requests (with content)
and adds the MVC AntiForgeryToken value to the data
so that your controller actions with the [ValidateAntiForgeryToken] attribute won't fail
original idea came from http://stackoverflow.com/questions/4074199/jquery-ajax-calls-and-the-html-antiforgerytoken
to use this
1) ensure that the following is added to your Durandal Index.cshml
<form id="__AjaxAntiForgeryForm" action="#" method="post">
@Html.AntiForgeryToken()
</form>
2) in main.js ensure that this module is added as a dependency
3) in main.js add the following line
antiforgery.addAntiForgeryTokenToAjaxRequests();
*/
addAntiForgeryTokenToAjaxRequests: function () {
var token = $('#__AjaxAntiForgeryForm input[name=__RequestVerificationToken]').val();
if (!token) {
app.showMessage('ERROR: Authentication Service could not find __RequestVerificationToken');
}
var tokenParam = "__RequestVerificationToken=" + encodeURIComponent(token);
$(document).ajaxSend(function (event, request, options) {
if (options.hasContent) {
options.data = options.data ? [options.data, tokenParam].join("&") : tokenParam;
}
});
}
};
});