ExtJS:使用"记住我"功能登录

Question

我正在尝试使用非常常见的"记住我"功能创建一个简单的登录窗口.登录验证是完成AJAX样式的,因此浏览器将不记得我的输入.

我的方法是使用内置state功能,但如何使用它会让我感到困惑.

Ext.state.Manager.setProvider(new Ext.state.CookieProvider({
    expires: new Date(new Date().getTime()+(1000*60*60*24*7)), //7 days from now
}));

...

{
    xtype: 'textfield',
    fieldLabel: 'User name',
    id: 'txt-username',
    stateful: true,
    stateId: 'username'
}, {
    xtype: 'textfield',
    fieldLabel: 'Password',
    id: 'txt-password',
    inputType: 'password',
    stateful: true,
    stateId: 'password'
}, {
    xtype: 'button',
    text: 'Validate',
    stateEvents: 'click'
}

我知道我必须实现该getState方法,但是在哪个组件上(我的猜测是在两个文本域中)？我没有意识到的另一件事是,按钮上的click事件如何连接到我的textfields的状态属性？

Answer 1

不要使用州.您将用户的密码以纯文本格式存储在浏览器的cookie中.任何有权访问浏览器的人都可以阅读它,并在每次请求时将其发送回服务器.

希望您使用某种形式的服务器端会话,并且不依赖于每个请求中存在的用户身份验证信息以保持登录状态.如果是这样,那么我建议利用大多数现代浏览器内置的密码保存功能来处理用户在任何给定会话中进行初始身份验证的情况.

要使浏览器的密码保存功能正常工作,首次加载页面时,身份验证表单必须存在于文档中.此外,凭证必须由传统(非AJAX)提交中的表单提交,这将刷新整个页面.

您可以通过最初将表单隐藏到文档中,然后使用ExtJS的功能来包含现有的HTML元素,同时在ExtJS UI中呈现表单,从而满足这些要求.

在文件的正文中:

<form id="auth-form" action="/url/of/your/login/action" method="POST">
    <input id="auth-username" type="text" name="username" class="x-hidden">
    <input id="auth-password" type="password" name="password" class="x-hidden">
    <input id="auth-submit" type="submit" class="x-hidden">
</form>

然后,在Ext.onReady中或当您显示身份验证表单时,构建一个使用上述表单元素的面板:

new Ext.Panel({
    el: 'auth-form',
    autoShow: true,
    layout: 'form',
    items: [
        {
            xtype: 'textfield',
            el: 'auth-username',
            autoShow: true,
            name: 'username',
            fieldLabel: 'Username',
            anchor: '100%'
        },
        {
            xtype: 'textfield',
            el: 'auth-password',
            autoShow: true,
            name: 'password',
            fieldLabel: 'Password',
            anchor: '100%'
        }
    ],
    buttons: [
        {
            text: 'Log in',
            handler: function() {
                Ext.get('auth-submit').dom.click();
            }
        }
    ]
});

表格的确切组成可能有所不同.它可以内置到Ext.Window实例或其他任何内容中.重要的是:

• 用户名和密码字段通过'el'和'autoShow'配置属性使用现有输入字段.
• 包含字段的面板之一对现有表单元素执行相同操作.
• 通过模拟点击现有的提交按钮来执行表单的提交.