ajax – ExtJS：使用’记住我’功能登录

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

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

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',stateId: 'password'
},{
    xtype: 'button',text: 'Validate',stateEvents: 'click'
}

我知道我必须执行getState方法,但是在什么组件(我的猜测是在两个文本框)？我没有意识到的另一件事是,我的点击事件如何连接到我的文本框的状态属性？

不要使用状态.您正在浏览器的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',name: 'username',fieldLabel: 'Username',anchor: '100%'
        },{
            xtype: 'textfield',el: 'auth-password',name: 'password',anchor: '100%'
        }
    ],buttons: [
        {
            text: 'Log in',handler: function() {
                Ext.get('auth-submit').dom.click();
            }
        }
    ]
});

形式的确切组成可能会有所不同.它可以内置到一个Ext.Window实例或其他任何东西.重要的是：

>用户名和密码字段通过’el’和’autoShow’配置属性使用现有的输入字段.>其中一个包含字段的面板对于现有的表单元素是一样的.>表单的提交是通过模拟点击现有的提交按钮执行的.

ajax – ExtJS：使用’记住我’功能登录

相关文章