我有一个骨干应用程序，我在其中使用 dualStorage 并且还为 Backbone 实现了我自己的同步。我已经实现了自己的同步，因为在我的 API 中，它需要在每个请求的标头中发送一个身份验证令牌。如果此身份验证令牌不存在或无效，则 API 返回 401 错误。
我的应用程序有两个选项卡，当您单击其中一个选项卡时，它会将路线从 /#guestlist 切换到 /#ticketlist，反之亦然。此问题仅在切换选项卡时发生，而不是在转到应用程序中的任何其他路由时发生。这就是这个问题让我感到非常奇怪的地方，只有这两个请求失败并且所有同步操作都应该被覆盖。
我遇到的问题似乎只存在于 Safari 中，而不存在于 Chrome 或 Firefox 中，但是由于这将主要在 iPad 上运行，所以我不能忽略这个问题。
这是手头的问题
1.) 登录系统，一切正常 UI 由 API 数据填充 2.) 单击工单列表选项卡，系统将您注销。这是因为 API 返回 401，因为请求中不存在身份验证令牌（同样仅在 safari 中）
[Error] Failed to load resource: the server responded with a status of 401 (Unauthorized) (ticketlist, line 0)
下面是我的 Backbone.sync 代码。
/*
* Store a version of Backbone.sync to call from the
* modified version we create
*/
var _nativeSync = Backbone.sync;
Backbone.sync = function (method, model, options) {
/*
* The jQuery `ajax` method includes a 'headers' option
* which lets you set any headers you like
*/
if(CheckinApp.getSession().isAuthenticated() !== false) {
/*
* Set the 'Authorization' header and get the access
* token from the `auth` module
*/
options.headers = {
'Authorization': 'Token ' + CheckinApp.getSession().getAuthorizationToken()
}
}
/*
* Call the stored original Backbone.sync method with
* extra headers argument added
*/
_nativeSync(method, model, options);
};
我唯一担心的是，这可能与使用 dualStorage 产生冲突，因为我知道这也会覆盖 Backbone.sync 方法。为了让它工作，我必须在 dualStorage 之后包含我的同步，如下所示。
<script type="text/javascript" src="js/vendor/backbone.dualstorage.min.js"></script>
<script type="text/javascript" src="js/plugins/backbone.sync.js"></script>
我还在 API 端转储了请求的标头，并且可以看到在从 Safari 发出的这个特定请求中缺少授权令牌，但在 chrome 或 firefox 发出的同一请求中却没有。
[Tue Apr 07 14:49:08.677473 2015] [:error] [pid 16743] [client 71.181.125.154:64016] <pre>Array\n(\n
[Host] => jcrawford.heytix.com\n
[User-Agent] => Mozilla/5.0 (Macintosh; Intel Mac OS X 10_7_5) AppleWebKit/537.78.2 (KHTML, like Gecko) Version/6.1.6 Safari/537.78.2\n
[Accept] => application/json, text/javascript, */*; q=0.01\n [
Referer] => http://jcrawford.heytix.com/guestlist/\n
[X-Requested-With] => XMLHttpRequest\n
[Authorization] => Token 951ba59c833a80e4ddaf72ee6b3d9143\n
[Accept-Language] => en-us\n [Accept-Encoding] => gzip, deflate\n
[Cookie] => 'removed from output'
[Connection] => keep-alive\n)\n</pre>, referer: http://jcrawford.heytix.com/guestlist/
[Tue Apr 07 14:49:12.027279 2015] [:error] [pid 16743] [client 71.181.125.154:64016] <pre>Array\n(\n
[Host] => jcrawford.heytix.com\n
[User-Agent] => Mozilla/5.0 (Macintosh; Intel Mac OS X 10_7_5) AppleWebKit/537.78.2 (KHTML, like Gecko) Version/6.1.6 Safari/537.78.2\n
[Accept] => application/json, text/javascript, */*; q=0.01\n
[Referer] => http://jcrawford.heytix.com/guestlist/\n
[Accept-Encoding] => gzip, deflate\n
[X-Requested-With] => XMLHttpRequest\n
[Accept-Language] => en-us\n
[Cookie] => 'removed from output'
[Connection] => keep-alive\n)\n</pre>, referer: http://jcrawford.heytix.com/guestlist/
[Tue Apr 07 14:49:12.027565 2015] [:error] [pid 16743] [client 71.181.125.154:64016] HTTP 401 (GET /api/events/13044/guestlist), referer: http://jcrawford.heytix.com/guestlist/
这就是我用 chrome 和/或 firefox 得到的。
[Tue Apr 07 14:57:38.686859 2015] [:error] [pid 17630] [client 71.181.125.154:65109] <pre>Array\n(
[Host] => jcrawford.heytix.com
[Connection] => keep-alive
[Cache-Control] => max-age=0
[Accept] => application/json, text/javascript, */*; q=0.01
[X-Requested-With] => XMLHttpRequest
[User-Agent] => Mozilla/5.0 (Macintosh; Intel Mac OS X 10_7_5) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/41.0.2272.104 Safari/537.36
[Authorization] => Token 951ba59c833a80e4ddaf72ee6b3d9143
[Referer] => http://jcrawford.heytix.com/guestlist/
[Accept-Encoding] => gzip, deflate, sdch
[Accept-Language] => en-US,en;q=0.8
[Cookie] => 'removed from output'
)</pre>, referer: http://jcrawford.heytix.com/guestlist/
[Tue Apr 07 14:57:44.001465 2015] [:error] [pid 17492] [client 71.181.125.154:65106] <pre>Array\n(\n
[Host] => jcrawford.heytix.com\n
[Connection] => keep-alive\n
[Accept] => application/json, text/javascript, */*; q=0.01\n
[X-Requested-With] => XMLHttpRequest\n
[User-Agent] => Mozilla/5.0 (Macintosh; Intel Mac OS X 10_7_5) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/41.0.2272.104 Safari/537.36\n
[Authorization] => Token 951ba59c833a80e4ddaf72ee6b3d9143\n
[Referer] => http://jcrawford.heytix.com/guestlist/\n
[Accept-Encoding] => gzip, deflate, sdch\n
[Accept-Language] => en-US,en;q=0.8\n
[Cookie] => 'removed from output'
)\n</pre>, referer: http://jcrawford.heytix.com/guestlist/
从上面的日志中可以看出，授权令牌是通过 Firefox/Chrome 传递的，但不是通过 Safari 传递的。我已将日志记录添加到同步方法中，它在控制台中声明用户在查询 API 之前已通过身份验证，然后重定向到登录页面。
[Log] sync called, isAuthenticated: true (backbone.sync.js, line 12)
[Error] Failed to load resource: the server responded with a status of 401 (Unauthorized) (ticketlist, line 0)
我在 Safari 开发人员工具/控制台等中没有看到任何其他错误或任何内容。应用程序向 API 发出请求，获得 401（如预期的那样，没有令牌），然后将用户从 Backbone 应用程序中注销并重定向到登录页面。当没有令牌存在时，这种行为是预期的，问题是为什么这不会为这些特定路由传递令牌？只有这些路由会导致问题，所有其他路由在 UI 中似乎都可以正常工作。
我还将提供我的路由器，以便您可以看到发生了什么，请记住，我在大部分情况下使用事件来执行实际路由，因此如果您需要查看任何其他代码，请告诉我。
CheckinApp.Routers.Default = Backbone.Router.extend({
view: null,
public_routes: ['login'],
routes:{
"":"eventlist",
"login": "login",
"guestlist": "guestlist",
"ticketlist":"ticketlist",
"managerslist":"managerslist",
"events": "eventlist",
"organize(/)(:action)": "displayOrganize",
"eventreport(/)(:event_id)": "eventreport",
"venuereport(/)(:venue_name)": "venuereport"
},
initialize:function (options) {
this.view = options.view;
Backbone.history.start();
},
guestlist:function () {
CheckinApp.getVent().trigger('main:renderListView', {title: 'Guest List', type: 'ticket', tab_hash: '#guestlist'});
},
ticketlist:function () {
CheckinApp.getVent().trigger('main:renderListView', {title: 'Ticket List', type: 'ticket', tab_hash: '#ticketlist'});
},
managerslist:function () {
CheckinApp.getVent().trigger('main:renderListView', {title: 'Managers List', type: 'ticket', tab_hash: '#managerslist'});
},
eventlist: function() {
var vent = CheckinApp.getVent();
vent.trigger('main:renderListView', {title: 'Todays Events', type: 'event'});
vent.trigger('tabs:remove');
},
eventreport: function() {
var collection = new CheckinApp.Collections.EventReport({"event_id": 13044});
var view = new CheckinApp.Views.EventReport({collection: collection});
view.render();
},
venuereport: function(venue_name) {
var collection = new CheckinApp.Collections.VenueReport([], {"venue_name": 'borgata'});
var view = new CheckinApp.Views.VenueReport({collection: collection});
var modal = new Backbone.BootstrapModal({
content: view,
title: ' ',
animate: true
});
modal.open();
//view.render();
},
login: function() {
var view = new CheckinApp.Views.Login({});
view.render();
},
before: function (route, params) {
if($.cookie('CheckinApp') && CheckinApp.getSession().isAuthenticated() == false) {
CheckinApp.setSessionFromCookie(JSON.parse($.cookie('CheckinApp')));
}
var hasAccess = CheckinApp.getSession().isAuthenticated(); // If cookie exists they are logged in..
if (!hasAccess) {
this.navigate('login', true);
} else {
if(route == 'login') {
this.navigate('', true);
return false;
}
}
if((_.contains(this.public_routes, route) === false)) {
return hasAccess; //return true if you want to proceed to routes else return false
}
},
after: function(route, params) {
if(route == 'logout') return false;
else {
CheckinApp.updateCookie();
return true;
}
}
});
最后是告诉 jQuery 监听 401 并在发生时注销用户的代码。
$.ajaxSetup({
statusCode: {
401: function () {
CheckinApp.clearSession();
Backbone.history.navigate('#login', true);
}
}
});
我还更进一步，在之前的路由中添加了一堆 console.log 语句并想出了这个。似乎这些特定路由正在执行某些操作导致身份验证丢失？
[Log] sync : isAuthenticated = true (backbone.sync.js, line 12)
[Log] sync: url = http://jcrawford.heytix.com/guestlist/checkin/api/events/13044/guestlist/ (backbone.sync.js, line 13)
[Error] Failed to load resource: the server responded with a status of 401 (Unauthorized) (guestlist, line 0)
[Log] before : isAuthenticated: false (default.js, line 60)
[Log] cookie: undefined (default.js, line 61)
[Log] before : hasAccess = false (default.js, line 66)
[Log] before : hasAccess = false, going to login page (default.js, line 68)
[Log] before : going to route login (default.js, line 76)
正如您所看到的那样，在对数据发出 AJAX 请求的行之前，它说已验证，然后请求失败并且它说未验证。
这次是我的同步方法中的更多记录
sync : isAuthenticated = true (backbone.sync.js, line 12)
sync: url = http://jcrawford.heytix.com/guestlist/checkin/api/events/13044/guestlist/ (backbone.sync.js, line 13)
User is Authenticated (backbone.sync.js, line 15)
options: {"parse":true,"headers":{"Authorization":"Token 951ba59c833a80e4ddaf72ee6b3d9143"}} (backbone.sync.js, line 24)
正如您在上面看到的，选项被设置在标头上，但由于某种原因，当使用 Safari Backbone 时，不会将这些标头与同步请求一起发送。
根据一些建议（以及以下建议），我尝试为 jQuery 修改 $.ajaxSetup，但收到的结果与我目前遇到的完全相同。
$.ajaxSetup({
headers: function() {
var token = '';
if(CheckinApp) {
var session = CheckinApp.getSession();
if(session) {
token = CheckinApp.getSession().getAuthorizationToken();
}
}
return {
"Authorization": "Token " + token
};
},
statusCode: {
401: function () {
CheckinApp.clearSession();
Backbone.history.navigate('#login', true);
}
}
});
任何帮助将不胜感激。