0

我正在开发一个简单的登录页面，其中我需要将任何用户在用户名字段中输入的值与单击“登录按钮”时的 json 数据存储进行比较。我的问题是，我们可以从数组中的 json 存储中获取用户名列表并与文本字段值进行比较吗？如果是这样，怎么做？

我的 nSpaceIndex.html

<html>
    <head>
        <title>nSpace | Expense / Project Solutions</title>
        <link rel="stylesheet" type="text/css" href="extjs/resources/css/ext-all.css">
        <script type="text/javascript" src="extjs/ext-debug.js"></script>
        <script type="text/javascript" src="app.js"></script>
    </head>

    <body>
    </body>
</html>

应用程序.js：

Ext.application({
    requires: ['Ext.container.Viewport'],
    name: 'nSpace',
    controllers: [
        'nSpaceController'
    ],
    appFolder: 'app',

    launch: function() {
        Ext.create('Ext.container.Viewport', {
            layout: 'fit',
            items: {
                xtype: 'loginView'
            }
        });
    }
});

我的 nSpaceController.js：

Ext.define('nSpace.controller.nSpaceController', {
    extend: 'Ext.app.Controller',
    stores: [
        'Users'
    ],
    views: [
        'login.loginView'
    ],
    model: 'loginModel',
    init: function() {
        this.control({
            "#loginButton": {
                click: this.onLoginButtonClick
            }
        });
    },
    onLoginButtonClick: function(){
                //var jsonArray = store.Users.data.items
                //console.log(jsonArray);
                            // I NEED TO GET THE REFERENCE OF MY STORE: USERS TO COMPARE
                            var logUserName = Ext.getCmp('getUserName').getValue();
                var logPassword = Ext.getCmp('getPassword').getValue();             
                if(logUserName == 'user01' && logPassword == 'password01'){
                    Ext.MessageBox.show({title: 'Success', msg: 'You will be redirected to the home page in few moments...', icon:Ext.MessageBox.INFO});
                }
                else if(logUserName == 'user02' && logPassword == 'password02'){
                    Ext.MessageBox.show({title: 'Success', msg: 'You will be redirected to the home page in few moments...', icon:Ext.MessageBox.INFO});
                }
                else{
                    Ext.MessageBox.show({title: 'OOPS!!!', msg: 'Please Enter Valid Details', icon:Ext.MessageBox.WARNING});
                }
    },

});

我的 loginModel.js：

Ext.define('nSpace.model.loginModel', {
    extend: 'Ext.data.Model',
    fields: ['loginusername', 'password']
});

用户.js：

Ext.define('nSpace.store.Users', {
    extend: 'Ext.data.Store',
    model: 'nSpace.model.loginModel',

    autoLoad : true,
    proxy: {
        type: 'ajax',
        url: 'data/users.json',
        reader: {
            type: 'json',
            root: 'users',
            successProperty: 'success'
        }
    }
});

登录视图.js：

Ext.define('nSpace.view.login.loginView' ,{
    extend: 'Ext.form.Panel',
    alias: 'widget.loginView',
    store: 'Users',
    title: 'nSpace | Login',
    frame:true,
    bodyPadding: 5,
    width: 350,
    layout: 'anchor',
    defaults: {
        anchor: '100%'
    },
    defaultType: 'textfield',
    items: [{
        fieldLabel: 'User Name',
        name: 'loginusername',
        id: 'getUserName',
        allowBlank: false
    },{
        fieldLabel: 'Password',
        inputType: 'password',
        id: 'getPassword',
        name: 'password',
        allowBlank: false
    }],

    // Reset and Submit buttons
    buttons: [{
        text: 'Sign Up',
        handler: function() {
           // location.href = 'signUp.html';
        }
    },{
        text: 'Reset',
        handler: function() {
            this.up('form').getForm().reset();
        }
    }, {
        text: 'Login',
        id:'loginButton',
        formBind: true, //only enabled once the form is valid
        disabled: true,
    }],
    renderTo: Ext.getBody()
});

用户.json：

{
    "success": true,
    "users": [
        {"loginusername": 'user01', "password": 'password01'},
        {"loginusername": 'user02', "password": 'password02'}
    ]
}
4

2 回答 2

0

在 this.control 上方的 init 函数中尝试使用 this..

var store = this.getUsersStore();
        store.load({
            callback:function(){
                  var l =  store.first();
                  console.log(l.get("password"));
          }
        });

这是你可以检查的方式

store.each(function(rec){
        if (rec.get('password') === value) {
            display = rec.get('username');
            return false;
        }
    });
于 2013-03-21T08:46:22.567 回答
0

正如其他用户所指出的，在应用程序的客户端执行授权是微不足道的。但是您已经表示这不是问题，因此我将回答您的问题，但不会解决这种方法明显的安全缺陷。

我看到您正在使用，Ext.getCmp()因此您的组件已被分配一个id. 这通常被认为是不好的做法，因为该id属性是全局的，因此如果有两个组件用相同id的 实例化，应用程序将崩溃。您可能会发现改为分配组件 anitemId并创建引用以在Controller的refs[]定义中轻松检索组件很有用。

例如：

Ext.define('nSpace.controller.nSpaceController', {

... other store/model/view here ...

refs: [{
    name: 'userNameField', // makes magic method 'getUserNameField()'
    selector: 'textfield[name=loginusername]',
    xtype: 'textfield'
},{
    name: 'passwordField', // makes magic method 'getPasswordField()'
    selector: 'textfield[name=password]',
    xtype: 'textfield'
}],

this.control({ .. observe events here .. });
});

检索对您的商店的引用，并搜索提供的用户...

var me = this, // controller
    store = Ext.getStore('Users'),
    user  = me.getUserNameField.getValue(),
    pass  = me.getPasswordField().getValue(),
    success;

// Attempt to find a record matching the provided user/pass
success = store.findBy(function(rec){
    return (rec.get('loginusername') === user && rec.get('password') === pass);
});

// Store findBy returns the index, or -1 if no matching record is found
if(success >= 0){
   // user/password matched
}else{
   // no user/password match found
}
于 2013-07-24T13:13:02.153 回答