Sencha Touch 2：在應用程序啓動時檢查cookie

Question

我對使用Sencha Touch 2庫進行開發完全陌生。我遵循本教程來幫助創建一個簡單的登錄腳本（http://miamicoder.com/2012/adding-a-login-screen-to-a-sencha-touch-application-part-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(); 
    } 
}); 

Answer 1

您可能會發現更容易只需添加一個檢查功能服務器檢查有效的會話。即使cookie在那裏，但並不意味着它們沒有註銷，並且會話cookie在每個請求中都被反覆發送。

也就是說，如果要從客戶端訪問cookie，它們將作爲單個字符串值附加到文檔。您可以在document.cookies上訪問它們。我會查看ExtJS cookies實用程序的文檔和源代碼，以獲取有關如何在該字符串中查找Cookie的一些靈感。

Ext.util.Cookies Documentation

Ext.util.Cookies Source

本質的過程是要經過在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 
      } 
     }); 
    } 
}); 

至於在服務器端腳本做什麼，它依賴於什麼語言，你正在開發中，你是什麼身份驗證反對。如果它只是一個用戶名和密碼數據庫，那麼當用戶首次登錄時，啓動一個會話併爲其用戶ID和密碼存儲一個會話變量。在檢查功能中，首先檢查當前會話是否存在，然後對數據庫重新進行身份驗證（以防您或其他人在會話仍然有效時取消其帳戶）確保它們仍然有效。然後發回一個json響應，說明他們是否已登錄，幷包含使您的應用程序正常工作所需的任何相關用戶信息。

Answer 2

在煎茶觸摸使用：

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]}); 
    } 
}