Javascript 在cookies中保存会话参数

我有一个简单的Backbone.js应用程序，用作后端。我有一个登录功能，可以从集合中查找用户，但我不知道如何保存会话。我考虑在cookies中存储一个参数，以后每次重定向时都会检查该参数。这是我的模型：

var User = Backbone.Model.extend({
    defaults: {
        login: '',
        password: '',
        authToken: ''
    }
});

这是我的收藏：

var UserCollection = Backbone.Collection.extend({
    url: 'http://localhost:3000/users',

    // creates a random token
    setToken: function () {
        var rand = function () {
            return Math.random().toString(36).substr(2)
        }

        var token = rand() + rand();
        this.set({authToken: token});
    }
});

这是具有登录功能的视图

var LoginView = Backbone.View.extend({
    initialize: function () {
        this.collection = new UserCollection();
        // template
    }
    // render function omitted

    signIn: function () {
        var login = $('#login').val();
        var password = $('#password').val();

        /** 
           finds a user within with the values from input fields
           inside the collection 
        */
        if (login && password) {
            this.collection.fetch({
                data: {
                    login: login,
                    password: password
                }
            });
        }
    }
});

---

此函数返回一个数组，其中一个对象是我请求的模型。我只需要使用我的

setToken

方法，并将此模型的

authToken

保存在cookie中，以便我可以在应用程序的其他地方使用它，但我实际上不知道如何做到这一点。

使用模型处理身份验证比收集更有意义。让模型的职责保持简单，并且只限于一件事。一个用于处理身份验证的模型，然后一个用于处理对需要进行身份验证的其他对象的调用的模型，而不是同时处理这两个对象

我个人根据的模型进行身份验证

我将其作为服务公开给我的应用程序。在这个

会话

模块中，我覆盖了

Backbone.Sync

，以确保对任何模型或集合的API的以下每次调用都进行身份验证

var mySession = new Account();


Backbone.sync = (function(syncFn) {
    return function(method, model, options) {
        options = options || {};

        var beforeSend = options.beforeSend,
            error = options.error;

        // Add auth headers
        options.beforeSend = function(xhr) {
            xhr.setRequestHeader('Authorization', "Bearer " + mySession.get('authToken'));
            if (beforeSend) return beforeSend.apply(this, arguments);
        };

        // handle unauthorized error (401)
        options.error = function(xhr, textStatus, errorThrown) {
            if (error) error.call(options.context, xhr, textStatus, errorThrown);
            if (xhr.status === 401) {
                mySession.signOut();
            }
        };

        return syncFn.apply(this, arguments);
    };
})(Backbone.sync);

主干会话的模型使用本地存储作为后端。它自己使用本地存储，而不是默认的

sync

行为

为什么是本地存储？ 您可以使用此实现，并将其最低限度地更改为使用cookies

本地存储对我来说是一个更好的选择，因为我的API位于另一个域上，并且使用CORS来启用公共访问

Safari还阻止来自未访问站点的cookie 直接的。您可以在安全设置中看到。这是默认设置 接受cookies：“仅来自我访问的站点”

var mySession = new Account();


Backbone.sync = (function(syncFn) {
    return function(method, model, options) {
        options = options || {};

        var beforeSend = options.beforeSend,
            error = options.error;

        // Add auth headers
        options.beforeSend = function(xhr) {
            xhr.setRequestHeader('Authorization', "Bearer " + mySession.get('authToken'));
            if (beforeSend) return beforeSend.apply(this, arguments);
        };

        // handle unauthorized error (401)
        options.error = function(xhr, textStatus, errorThrown) {
            if (error) error.call(options.context, xhr, textStatus, errorThrown);
            if (xhr.status === 401) {
                mySession.signOut();
            }
        };

        return syncFn.apply(this, arguments);
    };
})(Backbone.sync);

sync: function(method, model, options) {
  options = options || {};
  var url = model.options.url || model.url;
  var key = _.isFunction(url) ? url() : '' + url;
  var response;
  switch (method) {
    case 'create':
    case 'update':
      var data = model.toJSON();
      var text = JSON.stringify(data);
      response = localStorage.setItem(key, text);
      break;
    case 'delete':
      response = localStorage.removeItem(key);
      break;
    case 'read':
      response = JSON.parse(localStorage.getItem(key));
      break;
  }
  if (_.isFunction(options.success)) {
    options.success(response);
  }
  return Backbone.$.Deferred()
    .resolve(response)
    .promise();
},