CODEWITHSUNDEEP
angulartypescriptdevextremedevextreme-angular
DLedge
DLedge

Reputation: 113

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

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

Upvotes: 0

Views: 1468

Answers (3)

Marcos Kuester
Marcos Kuester

Reputation: 11

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

Upvotes: 1

DLedge
DLedge

Reputation: 113

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

Upvotes: 0

Debojyoti
Debojyoti

Reputation: 4841

Try encoding with btoa

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

Upvotes: 0

Related Questions