How to apply bearer token to an odata source for a Devextreme dxdata grid

Question

using angular and am trying to pass in a bearer token using an odata source with a devextreme dxdatagrid and I can't get it to authenticate and pull data, keeps returning "Current user did not login to the application!", indicating it's not authenticating.

I can successfully emulate the call using postman. DataSource definition below:

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
            }
        }
    }
}

Postman request image

I'm assuming I have the beforesend header definition incorrectly formatted, any help much appreciated

xhr screenshot

Can you share your browser's xhr request screenshot for this post request? — Debojyoti, Jul 11 '18 at 06:44

score 1 · Answer 1 · answered Mar 22 '21 at 00:21

The beforeSend function has to be inside the store object.

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

score 0 · Answer 2 · answered Jul 11 '18 at 06:42

0

Try encoding with btoa

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

answered Jul 11 '18 at 06:42

Debojyoti

4,503
3
19
27

using window.btoa didn't seem to help, any other ideas ? – DLedge Jul 11 '18 at 13:06

score 0 · Answer 3 · answered Jul 12 '18 at 07:15

I was able to get it working by defining the datasource as follows:

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(), }; } }) })

How to apply bearer token to an odata source for a Devextreme dxdata grid

3 Answers3