Kendo-Vue Datasource.beforeSend issue

i'm using kendovue for an application that i'm creating, the thing is that i must send the bearer token on each request. but i'm unable to pass it to the server as the function assigned to the beforesend event has the context of the request and not the vue component.

 dataSource: new kendo.data.DataSource({
      page: 1,
      pageSize: 20,
      serverPaging: true,
      transport: {
        read: {
          url: "/api/users/list",
          dataType: "json",
          beforeSend: function (req) {
            req.setRequestHeader('Authorization', 'bearer ' + this.$auth.token());
          }
        }
      },
      schema: {
        total: function (data) {
          return data.Data.Total;
        },
        data: function (data) {
          let d = data.Items;
          return d;
        }
      }
    }),

can someone point me on the right direction?

regards.

You could define it as method beforeSend: this.beforeSend and add it to the methods collection as below:

  methods:{
      beforeSend: function (req) {
        req.setRequestHeader('Authorization', 'bearer ' + this.$auth.token());
      }
    }

Here is a sample code that worked correctly at my side: https://stackblitz.com/edit/waonac?file=index.js.