Extjs Sencha Touch 2：在应用程序启动时检查cookie

我对Sencha Touch 2库的开发是全新的。我遵循本教程帮助创建了一个简单的登录脚本（）。我不确定的一件事是如何检查客户端是否存在会话令牌，这样当他们返回应用程序时，登录屏幕不会显示他们是否经过身份验证

app.js

Ext.application({
    name: 'RecruitTalkTouch',
    views: ['Login', 'MainMenu'],
    controllers: ['Login'],
    launch: function () {
      Ext.Viewport.add([
        { xtype: 'loginview' },
        { xtype: 'mainmenuview' }
      ]);
    }
});

Login.js控制器：

Ext.define('RecruitTalkTouch.controller.Login', {
  extend: 'Ext.app.Controller',
  config: {
    refs: {
      loginView: 'loginview',
      mainMenuView: 'mainmenuview'
    },
    control: {
      loginView: {
        signInCommand: 'onSignInCommand'
      },
      mainMenuView: {
        signOffCommand: 'onSignOffCommand'
      }
    }
  },
  onSignInCommand: function(view, username, password) {
    var me = this,
        loginView = me.getLoginView();

    if(username.length === 0 || password.length === 0) {
      loginView.showSignInFailedMessage('Please enter your username and password.');
      return;
    }

    loginView.setMasked({
      xtype: 'loadmask',
      message: 'Signing In...'
    });

    Ext.Ajax.request({
      url: 'http://localhost:3000/api/v1/sessions.json',
      method: 'POST',
      useDefaultXhrHeader: false,
      params: {
        login: username,
        password: password
      },
      success: function(resp) {
        var json = Ext.JSON.decode(resp.responseText);

        if(json.success === "true") {
          me.sessionToken = json.auth_token;
          me.signInSuccess();
        } else {
          me.signInFailure(json.message)
        }
      },
      failure: function(resp) {
        me.sessionToken = null;
        me.signInFailure('Login failed. Please try again');
      }
    });
  },
  signInSuccess: function() {
    console.log("Signed In");
    var loginView = this.getLoginView(),
        mainMenuView = this.getMainMenuView();

    loginView.setMasked(false);

    Ext.Viewport.animateActiveItem(mainMenuView, this.transition('slide', 'left'));
  },
  signInFailure: function(message) {
    var loginView = this.getLoginView();
    loginView.showSignInFailedMessage(message);
    loginView.setMasked(false);
  },
  transition: function(type, direction) {
    return { type: type, direction: direction };
  },
  onSignOffCommand: function() {
    var me = this;
    me.sessionToken = null;
    Ext.Viewport.animateActiveItem(this.getLoginView(), this.transition('slide', 'right'));
  }
});

Login.js视图：

Ext.define('RecruitTalkTouch.view.Login', {
    extend: 'Ext.form.Panel',
    alias: "widget.loginview",
    requires: ['Ext.form.FieldSet', 'Ext.form.Password', 'Ext.Label', 'Ext.Button'],
    config: {
        title: 'Login',
        items: [
          {
            xtype: 'label',
            html: 'Login failed. Please enter the correct credentials.',
            itemId: 'signInFailed',
            hidden: true,
            hideAnimation: 'fadeOut',
            showAnimation: 'fadeIn'
          },
          {
            xtype: 'fieldset',
            title: 'Login',
            items: [
              {
                xtype: 'textfield',
                placeHolder: 'Username',
                itemId: 'userNameTextField',
                name: 'userNameTextField',
                required: true
              },
              {
                xtype: 'passwordfield',
                placeHolder: 'Password',
                itemId: 'passwordTextField',
                name: 'passwordTextField',
                required: true
              }
            ]
          },
          {
            xtype: 'button',
            itemId: 'logInButton',
            ui: 'action',
            padding: '10px',
            text: 'Log In'
          }
        ],
        listeners: [{
          delegate: '#logInButton',
          event: 'tap',
          fn: 'onLogInButtonTap'
        }]
    },
    onLogInButtonTap: function() {
      var me = this,
          usernameField = me.down('#userNameTextField'),
          passwordField = me.down('#passwordTextField'),
          label = me.down('#signInFailed'),
          username = usernameField.getValue(),
          password = passwordField.getValue();

      label.hide();

      var task = Ext.create('Ext.util.DelayedTask', function(){
        label.setHtml('');
        me.fireEvent('signInCommand', me, username, password);

        usernameField.setValue('');
        passwordField.setValue('');
      });

      task.delay(500);
    },
    showSignInFailedMessage: function(message) {
      var label = this.down('#signInFailed');
      label.setHtml(message);
      label.show();
    }
});

---

您可能会发现，只需在服务器上添加一个检查函数来检查有效会话就更容易了。即使cookie在那里，也不意味着他们没有注销，会话cookie会随着每个请求来回发送

也就是说，如果您想从客户端访问cookie，它们将作为单个字符串值附加到文档中。您可以通过document.cookies访问它们。我将查看ExtJS cookies实用程序的文档和源代码，以获得一些关于如何在该字符串中查找cookie的灵感

基本上，这个过程是遍历cookie字符串中的每个字母，将一个子字符串提取到会话密钥名称的长度，查看是否匹配，然后在下一个等号和分号之间提取数据。然后对值进行百分比编码，就可以开始了

编辑 要ping服务器，只需在显示第一个视图之前，在应用程序加载过程中的某个地方发出Ajax请求。启动功能是一个非常自然的地方，我认为：

Ext.application({
    name: 'App',

    requires: [],
    models: [],
    stores: [],
    views: [],
    controllers: [],

    ....

    launch: function () {
        //Check with the server
        Ext.Ajax.request({
            //Proxy Settings
            url: 'path/to/check/script.php',
            //Callbacks
            success: function (response, opts) {
                // process server response here
                response = Ext.JSON.decode(response.responseText);
                if(response && response.success === true) {
                    //Load the normal first view
                    Ext.Viewport.add(Ext.create('App.view.Main');
                } else {
                    //Load the login view
                    Ext.Viewport.add(Ext.create('App.view.LoginForm');
                }
            },
            failure: function (response, opts) {
                //Notify of network failure
            }
        });
    }
});

至于在服务器端的脚本中要做什么，这取决于您使用什么语言开发以及您要针对什么进行身份验证。如果它只是一个用户名和密码的数据库，那么当用户首次登录时，启动一个会话，并为他们的用户名和密码存储一个会话变量。在“检查”功能中，首先检查当前会话是否存在，然后根据您的数据库重新验证，以确保它们仍然有效（以防您或其他人在会话仍然有效时取消了其帐户）。然后只需返回一个json响应，说明他们是否已登录，并包含使应用程序正常运行所需的任何相关用户信息。

在Sencha Touch中使用：

var cookiestr = document.cookie.split('; ');
var cookieObjArr = new Array();

for (var i=0; i<cookiestr.length; ++i)
{
    if (i in cookiestr)
    {
        tmp = cookiestr[i].split('=');
        cookieObjArr.push({"key": tmp[0], "value": tmp[1]});
    }
}

var cookiestr=document.cookie.split（“；”）； var cookieObjArr=新数组（）；

---

for（var i=0；iThanks for the advice！那么你是说在应用程序启动时，我应该ping服务器以确保用户登录并检查cookies？是的，ping服务器是我经常做的事情，也是我的建议。如果你使用的会话听起来像你，那么检查他们是否登录到服务器并使用cookies（每次在http请求中来回发送）。服务器从http请求中的cookie中提取会话id，检查它是否仍在跟踪该id，以及该id是否已过期。我确信这在某种程度上取决于语言/环境，但我非常确定这是大多数web开发堆栈中用户跟踪的基本思想。太棒了！非常感谢！无论如何，您可以提供一个e在应用程序启动时ping服务器的示例？这正是我所做的。上面的示例是点击/ping服务器。它对“path/to/check/script.php”执行ajax请求，然后根据请求的会话显示登录表单或主应用程序。如果用户未登录，则发送401或其他错误状态。其他发送一个200，并显示主视图。