Guide on integrating a bearer token with an odata source in order to utilize it with a Devextreme dxData Grid

I am using Angular and I am attempting to pass a bearer token through an OData source with a DevExtreme DXDataGrid, but I am facing authentication issues. The error message "Current user did not login to the application!" keeps appearing, indicating that it is failing to authenticate.

Interestingly, I can successfully make the call using Postman. Below is my DataSource definition:

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

View Postman request image here.

I suspect that there might be an issue with how I have formatted the before send header definition. Any assistance on this matter would be highly appreciated.

View XHR screenshot here.

angulartypescriptdevextremedevextreme-angular

Answer №1

It is crucial that the beforeSend function is contained within the store object.

this.dataSource = {
  store: {
    type: 'odata',
    key: 'Id',
    url: 'https://api.example.com/odata/Books',
    version: 4,
    withCredentials: true,
    beforeSend: (request) => {
      request.headers = {
        "Authorization": `Bearer ${accessToken}`
      };
    }
  }

Answer №2

Experiment with encryption using btoa

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

Answer №3

To solve the issue, I made adjustments in defining the datasource as shown below:

This.gridData = new SourceData({ storage: new ODataStorage({ location: "http://localhost:21021/odata/Roles", identifier: "Id", typeIdentifier: "Int32", versionNumber: 4, beforeSend: (e) => {
e.headers = { "Content-Type": "application/json", "Authorization": 'Bearer ' + abp.auth.getToken(), }; } }) })

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Node.js server side rendering encounters import file failure

In my current project, I am working on implementing server side rendering with React using TypeScript. All of the components, containers, and other directories are located within the src directory. When React imports a file from a location such as ./src/p ...

node.jsreactjstypescriptwebpackserver-side-rendering

Unexpected INTERNAL error encountered with Firebase's Cloud Function update

Currently, I am immersed in a project involving Vue.js 3, Typescript, and Firebase. However, while attempting to integrate new cloud functions, I came across an unexpected issue: Failed to load resource: the server responded with a status of 500 () Un ...

typescriptfirebasevue.jsgoogle-cloud-platform

Issue: The program is unable to locate a suitable object 'John' to support the operation. NgFor is only compatible with binding to collections like arrays and iterables

I am dealing with a JSON object that I need to display in a table. Here is my JSON data: json: string = `{ "name" : "John", "surname" : "Walsh", "age" : "23" }`; ...

angulartypescript

Setting up a Vue.js 3 project with Vuetify 3 and Vite, deployed into a nested folder structure

Recently, I developed an application using Vue.js 3 and Vuetify 3 with the help of Vite. Everything was working perfectly when I deployed it to production in the main root folder (accessible through http://example.com). However, now I am faced with a chall ...

typescriptvue.jsvuetify.jsvite

Do TypeScript project references provide value when noEmit is used?

To enhance the speed of my editor interaction and reduce the time taken by tsc to run on my TypeScript code, I am considering implementing project references. Many teams have reported substantial performance improvements after incorporating project referen ...

typescriptvisual-studio-code

Collaborative Vue component: Clients need to manually import the CSS

I recently created a Vue component using TypeScript that resulted in a separate CSS file being generated after the build process. However, I noticed that when the client imports this component, the CSS file is not imported automatically and needs to be exp ...

csstypescriptvue.jsvuejs2

The Selenium tests are running smoothly, however, despite their successful execution, I am not receiving any pass results as the assertions seem

Currently, I am in the process of incorporating Selenium (v4.18.1) tests into an Angular web application specifically for the Microsoft Edge browser (v122.0.2365.59). The necessary Microsoft Edge WebDriver (v122.0.2365.59) has been successfully installed. ...

angularselenium-webdrivermicrosoft-edge

Retrieve a variety of outputs from computed properties in Vue

I have created buttons to select different dates (one for tomorrow and one for next week) with a function that calculates only business days. The 'tomorrow' button should display either 'Tomorrow' or 'Monday', while the ' ...

javascripttypescriptvue.jsdatetimecomputed-properties

Create a new object by mapping values from an array of two objects in Angular using TypeScript, based on the object

Here is a code snippet for a Question and Answer data structure: export class Question { id: string; title: string; description: string; answers: Answer[]; } export class Answer { id: string; text: string; questionId: string; } We have two ...

javascriptangulartypescriptforeach

Utilize ngSwitch in Angular 5 for dynamically rendering either text or textarea content

My goal is to utilize ngSwitch in order to dynamically display either text or a text area based on the Format Type ID. Each question should either display a text area or an input text field. However, currently, the text area is being displayed for every F ...

angular

Tips for utilizing RouterLink within an HTML template

Angular 2.3.0 I created a module in Angular 2 as shown below: import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { RouterModule, Routes } from '@angular/router'; impo ...

angulartypescriptangular2-routing

What is the internal mechanism used by Angular for routing implementation?

My traditional belief about web browsers has been challenged by the behavior of Angular. I used to think that when a user enters a new URL, the browser would fetch a whole new page from the network and display it, replacing the old one. But with Angular, ...

angularbrowser

Leveraging the find method to sort through an array with dual parameters

I'm facing an issue while trying to filter my array of objects using two parameters. Despite having an object in the array with the same values as the parameters, the result is empty. const item = this.lista.find(i => i.number === rule.number && ...

arraystypescriptfilterangular6

Incorporating the "length" property and other attributes from a tuple into a TypeScript mapped object type erroneously

According to the information found in the TypeScript documentation on mapped tuple types, if a fixed-length tuple type is created as follows: type FixedList = [string, number, boolean]; and then a generic type intended to be passed into it is created: typ ...

typescriptmapped-types

Ensure that the constructor function is fully executed before triggering the interceptor function

As a beginner in Angular, I decided to utilize Firebase for storing user tokens that can be retrieved when calling an interceptor to modify request headers. I have included the firebase function in the constructor and the HttpHandler function separately, ...

angularfirebase

Angular fails to refresh values within a FormArray

My dilemma involves filling a form Group that contains a dynamic array. The length of the array is determined by a dropdown with multiple selections. Each selection creates a new array, but only the values from the last dropdown are being added to the form ...

angularangular-forms

Typescript's intricate data structures

I'm looking to communicate a string in my design that includes indexes, with the possibility of ending the string with either "work" or "crash": export interface Test { date: string, 'stat.conv[index: number].key[index: number].(work || cr ...

typescripttypesinterface

Streamline the process of sorting through 2 arrays

Is there a more concise and elegant way to achieve the same functionality as my current method? I am looking for a shorter solution to create an array of items that haven't been used in the form previously, which are then used to populate a select dro ...

javascriptangular

Developing an Angular application and hosting it on an Apache server without the need

I am facing an issue where I need to share an Angular application with an external team, but they are encountering a 404 Not Found error when trying to load a page directly. Unfortunately, I do not have access to the Apache server where the application is ...

angularapache.htaccessmod-rewrite

JavaScript: Manipulating Data with Dual Arrays of Objects

//Original Data export const data1 = [ { addKey: '11', address: '12', value: 0 }, { addKey: '11', address: '12', value: 0 }, { addKey: '12', address: '11', value: 0 }, { addKey: &a ...

javascriptnode.jstypescript