How to set Authorization header for transport read?

[sangwon]

How to set Authorization header for transport read?

I already searched about this question and found answer for Kendo UI for jQuery.

but how can it be possible for Vue?

[sangwon]

Is it correct syntax?

my code:

...

 <kendo-datasource ref="datasource"
                    :schema-model-id="'id'"
                    :schema-model-fields="schemaModelFields"
                    :schema-data="schemaData"
                    :schema-total="schemaTotal"

                    :transport-create-beforeSend="onBeforeSend"
                    :transport-create-url="'http://---.---.---.---:----/graphql'"
                    :transport-create-content-type="'application/json'"
                    :transport-create-type="'POST'"
                    :transport-create-data="additionalParamsOnCreate"

                    :transport-read-beforeSend="onBeforeSend"
                    :transport-read-url="'http://---.---.---.---:----/graphql'"
                    :transport-read-content-type="'application/json'"
                    :transport-read-type="'POST'"
                    :transport-read-data="additionalParamsOnRead"

                    :transport-update-beforeSend="onBeforeSend"
                    :transport-update-url="'http://---.---.---.---:----/graphql'"
                    :transport-update-content-type="'application/json'"
                    :transport-update-type="'POST'"
                    :transport-update-data="additionalParamsOnUpdate"

                    :transport-destroy-beforeSend="onBeforeSend"
                    :transport-destroy-url="'http://---.---.---.---:----/graphql'"
                    :transport-destroy-content-type="'application/json'"
                    :transport-destroy-type="'POST'"
                    :transport-destroy-data="additionalParamsOnDestroy"

                    :page-size="20"
                    :transport-parameter-map="parameterMap">
  </kendo-datasource>

...

<kendo-grid :height="600" :data-source-ref="'datasource'" :navigatable="true" :pageable="true" :editable="true"

:toolbar="['create', 'save', 'cancel']">

...

onBeforeSend: function(req) {
      let component = this;
      debugger;
      req.setRequestHeader('Authorization', 'bearer ---token string---');
    },

[sangwon]

I Solve them myself by searching it.

Anyway, I was added '/' character at end of graphql url. That caused problem that can't recognized url correctly.

My Code is :

<template>

...

<kendo-grid :height="600" :data-source="ds" :navigatable="true" :pageable="true" :editable="true" :toolbar="['create', 'save', 'cancel']">

<kendo-grid-column :field="'name'" :title="'Name'"></kendo-grid-column>

...

</kendo-grid>

...

</template>

...

data() {

    return {

ds: new kendo.data.DataSource({
              // page: 1,
              pageSize: 20,
              // serverPaging: true,
              transport: {
                create: {
                  contentType: "application/json",
                  url: "http://(..server_address..):(..port..)/graphql",  // ( DO NOT USE '/' character at the end of url. )
                  //dataType: "json",
                  type: "POST",
                  beforeSend: this.onBeforeSend ,
                  data: this.additionalParamsOnCreate
                },
                read: {
                  contentType: "application/json",
                  url: "http://(..server_address..):(..port..)/graphql",  // ( DO NOT USE '/' character at the end of url. )
                  //dataType: "json",
                  type: "POST",
                  beforeSend: this.onBeforeSend ,
                  data: this.additionalParamsOnRead
                },
                update: {
                  contentType: "application/json",
                  url: "http://(..server_address..):(..port..)/graphql",  // ( DO NOT USE '/' character at the end of url. )
                  //dataType: "json",
                  type: "POST",
                  beforeSend: this.onBeforeSend ,
                  data: this.additionalParamsOnUpdate
                },
                destroy: {
                  contentType: "application/json",
                  url: "http://(..server_address..):(..port..)/graphql",  // ( DO NOT USE '/' character at the end of url. )
                  //dataType: "json",
                  type: "POST",
                  beforeSend: this.onBeforeSend ,
                  data: this.additionalParamsOnDestroy
                },
                parameterMap: this.parameterMap
              },
              schema: {
                data: this.schemaData , // I used method
                total: this.schemaTotal , // I used method
                model: {
                  id: "IdFiled",
                  fields: // other fileds // I used method
                }
              },
              pageSize: 10
            }),
      schemaModelFields: {
        // define schema model it can be found at Telerik Docs 
      }

...

methods: {

...

onBeforeSend: function(req) {

  let component = this;
      //debugger;
      req.setRequestHeader("Authorization", "bearer ...tokenstring...");

},

schemaData: function(response) {

var data = response.data;

...

return data.(result data name);

},

schemaTotal: function(response) {

return response.data.(result data name).length;

}

parameterMap: function(options, operation) {

return  kendo.stringify({
               query: options.query,
               variables: options.variables
           });

}

additionalParamsOnCreate: function(model) {

var createQuery = "mutation createSomthing($something: SomethingInput!){"+

"createSomething(something: $something) {" +

// fileds ...

"}";

return {

query: createQuery,
               variables: { "something": model }

};

},

additionalParamsOnRead: function(model){ ... },

additionalParamsOnUpdate: function(model){ ... },

additionalParamsOnDestroy: function(model){ ... },

...

},

...