使用 Extjs 存储的基本身份验证答案

【问题标题】：Basic authentication with Extjs store使用 Extjs 存储的基本身份验证
【发布时间】：2020-01-03 11:36:37
【问题描述】：

我在 ExtJS 中有以下存储。我需要发送带有此请求的身份验证标头以进行基本身份验证。有可能这样做吗？

Ext.define('MyApp.store.DataGridModels', {
    extend: 'Ext.data.Store',
    alias: 'store.datagridmodels',

    requires: [
        'MyApp.model.DataGridModel',
        'Ext.data.proxy.JsonP'
    ],

    constructor: function(cfg) {
        var me = this;
        cfg = cfg || {};
        me.callParent([Ext.apply({
            storeId: 'DataGridModels',
            autoLoad: true,
            model: 'MyApp.model.DataGridModel',
            proxy: {
                type: 'jsonp',
                url: 'http://example.com/data.php'
            }
        }, cfg)]);
    }
});

【问题讨论】：

标签： javascript extjs jsonp basic-authentication sencha-architect

【解决方案1】：

在我的应用程序init 函数中，我这样做：

Ext.Ajax.on('beforerequest', function (conn , options , eOpts) {

    // Get a token from the internal storage.
    // We have gotten it during the authentication procedure.
    var token = window.localStorage.authToken;
    if (!token) return;

    options.headers = options.headers ? {};
    options.headers.Authorization = 'Bearer ' + token);
    // Usually I use lodash code:
    // _.set(options, ['headers', 'Authorization'], 'Bearer ' + token)
});

它将修改每个附加授权标头的 Ajax 请求。

如果使用“基本”身份验证方案，则 Authorization 标头的值构造如下：

用户名和密码用冒号组合（用户名：密码）。
生成的字符串采用 base64 编码 (dXNlcm5hbWU6cGFzc3dvcmQ=)。

所以，如果 base64 字符串是之前计算的并保存在 window.localStorage.baseAuthenticationToken 中，代码将是这样的：

Ext.Ajax.on('beforerequest', function (conn , options , eOpts) {
    var token = window.localStorage.baseAuthenticationToken;
    if (!token) return;
    options.headers = options.headers ? {};
    options.headers.Authorization = 'Basic ' + token);
});

【讨论】：