ExtJS:使用“记住我"功能登录 [英] ExtJS: Login with 'Remember me' functionality

问题描述

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

I'm trying to create a simple login window with the very common 'Remember me' functionality. The login validation is done AJAX style, thus the browser won't remember my input.

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

My approach is to use the built-in state functionality, but how to use it confuses me.

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 方法，但是在哪个组件上(我猜是在两个文本字段上)?我没有意识到的另一件事是，我在 button 上的 click 事件如何连接到我的 textfields 的状态属性?

I know I have to implement the getState method, but on what component (my guess is on the two textfields)? Another thing I fail to realize is, how is my click event on the button connected to the state properties of my textfields?

推荐答案

不要使用状态.您将用户的密码以纯文本形式存储在浏览器的 cookie 中.任何有权访问浏览器的人都可以读取它，并且它会在每次请求中发送回服务器.

Don't use state. You are storing the user's password in plain text in the browser's cookies. Anyone who has access to the browser can read it and it is being sent back to the server in every request.

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

Hopefully you are using some form of server-side sessions and are not depending on the user's authentication information being present in every request to maintain logged-in state. If so, then I recommend taking advantage of the password saving feature built in to most modern browsers to handle remembering of the user for the initial authentication in any given session.

要使浏览器的密码保存功能发挥作用，首次加载页面时，文档中必须存在身份验证表单.此外，凭据必须通过该表单以传统(非 AJAX)提交方式提交，这将刷新整个页面.

For the browser's password saving feature to work the authentication form must be present in the document when the page is first loaded. Also, the credentials must be submitted by that form in a traditional (non-AJAX) submit which will refresh the entire page.

您可以满足这些要求，同时仍然在 ExtJS UI 中呈现表单，方法是首先将表单隐藏在文档中，然后使用 ExtJS 的功能来征用现有的 HTML 元素.

You can fulfill these requirements while still presenting the form in the ExtJS UI by initially rendering the form hidden into the document and then using the capabilities of ExtJS to commandeer existing HTML elements.

在文档正文中放置:

<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 中或在您显示身份验证表单时构建一个使用上述表单元素的面板:

Then, in Ext.onReady or at the time you are displaying an authentication form build a panel which makes use of the above form elements:

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 实例或其他任何东西中.什么是重要的:

The exact composition of the form may vary. It may be built into an Ext.Window instance or whatever else. What is important:

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

这篇关于ExtJS:使用“记住我"功能登录的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！