Most of the answers to your questions are in the original post but I'll try again.
Question 1:Our app uses auth tokens to verify if a user is logged in. These tokens can expire. We also use refresh tokens to renew an expired auth token. The usual steps for handling tokens occur at the time of the request to the server. The request processing steps are:
- Check if auth token has expired. If not, skip to step 3
- Make call to server with refresh token to get a new auth token (asynchronous part)
- Make request as usual with the auth token in the header (this is why we need async operation, in the case of an expired auth token, we don't know what the valid auth token is until the refresh call has completed)
Question 2:
This applies to all grids in our app but here's the Vue component for a simple one:
<template>
<div>
<ejs-grid id="CoursePoolGrid" ref="grid" :dataSource="dataSource">
<e-columns>
<e-column field="name" headerText="POOL NAME" :customAttributes="{ class: 'priority-column' }"></e-column>
<e-column field="noOfCourses" headerText="NUMBER OF COURSES"></e-column>
<e-column field="slotsAvailablePerDay" headerText="SLOTS PER DAY"></e-column>
<e-column field="teeTimeAvailable" headerText="SLOTS IN THE POOL"></e-column>
<e-column field="remainingSlots" headerText="SLOTS REMAINING"></e-column>
</e-columns>
</ejs-grid>
</div>
</template>
<script>
import { DataManager } from "@syncfusion/ej2-data";
import CustomUrlAdaptor from "./customUrlAdaptor";
export default {
name: 'CoursePools',
data: () => {
return {
pageSettings: { pageSize: 10, pageSizes: true },
searchSettings: { fields: ['name'] },
toolbar: ['Search']
}
},
computed: {
dataSource() {
return new DataManager({
url: `${process.env.VUE_APP_API}/coursePools/indexdatatable`,
headers: [
{ 'Accept': 'application/json' }
],
adaptor: new CustomUrlAdaptor()
});
}
}
};
</script>
And the CustomUrlAdapter code:
import { UrlAdaptor } from "@syncfusion/ej2-data";
import store from '@/store';
import router from '@/router';
export default class CustomUrlAdaptor extends UrlAdaptor {
constructor(options) {
super(options);
}
beforeSend(dm, request) {
// Make sure the auth token hasn't expired
const isExpired = store.getters['authentication/isExpired'](); // isExpired is a function getter
if (isExpired) {
// Perform a refresh of the auth token
store.dispatch('authentication/refreshToken', 'fetch')
.then(() => {
// Add the auth header
request.setRequestHeader('Authorization', `Bearer ${store.state.authentication.authToken}`); // <=== This is giving error as the request is no longer in OPENED state
})
.catch(() => {
store.commit('authentication/logout');
return router.push({ name: 'login' });
});
} else {
// Add the auth header
request.setRequestHeader('Authorization', `Bearer ${store.state.authentication.authToken}`);
}
}
}
Question 3:
This is pretty much answered in Question 1. We get the auth token from our backend API and add it as a header on the requests. If the current auth token has expired, we need to make an async call to get a new one BEFORE the request to the server can be completed which is why we need an asynchronous way to perform an operation before the grid requests data.
Question 4:
I'm not a Typescript person but here's what I think your example might look like (faking the get token call).
import Vue from "vue";
import axios from 'axios';
import VueAxios from 'vue-axios';
import { GridPlugin, Page, Toolbar, Edit } from "@syncfusion/ej2-vue-grids";
import { DataManager, RemoteSaveAdaptor, UrlAdaptor } from "@syncfusion/ej2-vue-grids/node_modules/@syncfusion/ej2-data";
import Component from "vue-class-component";
Vue.use(GridPlugin);
const getToken = function() {
return new Promise(resolve => {
setTimeout(() => {
resolve('bearer');
}, 2000);
});
}
class custom extends UrlAdaptor {
beforeSend(dm: DataManager, request: XMLHttpRequest): void {
const token = getToken()
.then(token => {
request.setRequestHeader("Authorization", token);
})
}
}
export default Vue.extend({
data: () => {
return {
toolbar: ['Add', 'Edit','Delete','Update','Cancel'],
editSettings: { allowAdding: true, allowEditing:true, allowDeleting:true },
pageSettings: { pageCount: 3 },
};
},
methods: {
created() {
},
load() {
var localData = new DataManager({
url: "Home/UrlDatasource",
insertUrl: "Home/Insert",
updateUrl: "Home/Update",
removeUrl: "Home/Delete",
adaptor: new custom
});
var grid = (document.getElementsByClassName('e-grid')[0] as any).ej2_instances[0];
grid.dataSource = localData;
}
},
provide: {
grid: [Page, Toolbar,Edit]
}
});
Now from your description that beforeSend is synchronous, I understand that this likely can't be done this way. Is there some other way to asynchronously determine the headers for each request?
Thanks,
Jason
