angular - 如何将不记名令牌应用于 Devextreme dxdata 网格的 odata 源

Question

使用 angular 并尝试使用带有 devextreme dxdatagrid 的 odata 源传递不记名令牌，但我无法对其进行身份验证和提取数据，不断返回“当前用户未登录应用程序！”，表明它没有进行身份验证.

我可以使用邮递员成功模拟呼叫。数据源定义如下：

constructor(
    injector: Injector,
    private _route: ActivatedRoute,
    private _router: Router
) {
    super(injector);
    let authString = "Bearer " + getToken();

    this.gridDataSource = {
        store: {
            type: 'odata',
            key: 'Id',
            keyType: "Int32",
            version: 4,
            url: 'http://localhost:21021/odata/Roles'
        },
        select: [
            'Id',
            'Name',
            'DisplayName'
        ],
        beforeSend: (e) => {  
            e.headers = {
                "Content-Type": "application/json",
                "Authorization": authString
            }
        }
    }
}

邮递员请求图片

我假设我的 beforesend 标头定义格式不正确，非常感谢任何帮助

xhr 截图

Answer 1

beforeSend 函数必须在 store 对象中。

    this.dataSource = {
      store: {
        type: 'odata',
        key: 'Id',
        url: 'https://localhost:44350/odata/Books',
        version: 4,
        withCredentials: true,
        beforeSend: (e) => {
          e.headers = {
            "Authorization": `Bearer ${jwtToken}`
          };
        }
      }

Answer 2

我能够通过如下定义数据源来使其工作：

this.gridDataSource = new DataSource({ store: new ODataStore({ url: " http://localhost:21021/odata/Roles ", key: "Id", keyType: "Int32", version: 4, beforeSend: (e ) => {
e.headers = { "Content-Type": "application/json", "Authorization": 'Bearer' + abp.auth.getToken(), }; } }) })

Answer 3

尝试使用btoa编码

let authString = "Bearer " + window.btoa(getToken()+ ':');