javascript - ExtJS 4.1 或通用 Javascript HTTP_Authorization 函数

Question

使用curl --basic --user someuser:somepass http://someurl/发出请求时，它会附加一个如下 header :Authorization: Basic Y2FsaWRvZzpmMDBmM2IwMg==。这是当然的

Basic access authentication is a method for a web browser or other client program to provide a user name and password when making a request. Before transmission, the user name is appended with a colon and concatenated with the password. The resulting string is encoded with the Base64 algorithm and transmitted in the HTTP header and decoded by the receiver, resulting in the colon-separated user name and password string. Basic access authentication was originally defined in 1996 by RFC 1945 [http://en.wikipedia.org/wiki/Basic_access_authentication][1] [1]: http://en.wikipedia.org/wiki/Basic_access_authentication

我正在寻找一种方法让我的所有 ExtJS 4.1 Ext.data.proxy.Rest 代理将此添加到所有请求中。这似乎是一个简单的任务，但我找不到任何相关文档。顺便说一句，我确实知道如何通常通过 headers: {'X_MyHeader':'somevalue'} 属性向代理添加 header 。我只是不知道如何告诉 Ext 对当前用户名/密码进行全局操作。

Answer 1

我正在寻找类似的解决方案，将 OAuth token 应用于我的 Ext.data.proxy.Rest 代理，但找不到任何相关信息。非常震惊，没有任何关于如何做到这一点的信息。让我觉得我的处理方式是错误的。不管怎样，这就是我为实现这一目标而想出的办法。

覆盖Ext.data.proxy.Ajax并保留静态变量，以便它适用于所有代理。然后将设置的 authHeader 与当前 header 列表合并，以便您仍然可以自定义每个代理。

Ext.override(Ext.data.proxy.Ajax, {

    statics: {
        authHeader: undefined,
    },

    /**
     * @cfg {Object} headers
     * Any headers to add to the Ajax request. Defaults to undefined.
     */

    doRequest: function(operation, callback, scope) {
        var writer  = this.getWriter(),
            request = this.buildRequest(operation, callback, scope);

        if (operation.allowWrite()) {
            request = writer.write(request);
        }
        console.log(this.headers);
        Ext.apply(request, {
            headers       : Ext.apply(this.headers, Ext.data.proxy.Ajax.authHeader) || Ext.data.proxy.Ajax.authHeader,
            timeout       : this.timeout,
            scope         : this,
            callback      : this.createRequestCallback(request, operation, callback, scope),
            method        : this.getMethod(request),
            disableCaching: false // explicitly set it to false, ServerProxy handles caching
        });

        Ext.Ajax.request(request);

        return request;
    }
});

然后我在本地存储中查找我的 token ，如果存在则全局设置它，否则提示登录。

MyApp.model.AuthToken.load(1, {
    callback: function(record) {
        // If we don't have anything in local storage for the user, show the login box.
        if (record.get('access_token') == '') {
            var window = Ext.create('MyApp.view.Login');
            window.show();
        } else {
            Ext.data.proxy.Ajax.authHeader = { 'Authorization': 'Bearer ' + record.get('access_token') };
        }
    }
});

其中应该有一些额外的逻辑来处理 token 过期和刷新请求，但您明白了!