Results 1 to 5 of 5

Thread: Overriding all requests to run an async method before continuing

  1. #1
    Sencha Premium Member
    Join Date
    Sep 2013
    Posts
    14
    Answers
    2

    Default Overriding all requests to run an async method before continuing

    So what I want to achieve is to have a check run before every sort of Ajax request is executed that will check if an access token is about to expire, then renew it and continue the request, if not just continue the request.

    So I'm trying to override the request-method of Ext.data.Connection, but I'm having some issues getting this to work the way I want it to. I.e. if I try to call "callSuper" in a callback, it just complains about not finding the superclass. If I wrap the whole original function body within the callback, form.submit() stops working, complaining about the form not being connected etc.

    Any ideas or input?

    PHP Code:
    Ext.define('app.overrides.data.Connection', {
      
    override'Ext.data.Connection',

      
    // Should not be in this class, but rather an util class, just putting it here as an example
      
    checkToken: function (minValidity) {
        return new 
    Ext.Promise(function (resolve) {
          var 
    expiresAt JSON.parse(localStorage.getItem('expires_at')),
            
    expiresIn expiresAt Date.now();

          if (
    expiresIn <= minValidity) {
            
    renewToken(function (accessToken) {
              
    resolve(accessToken);
            });
          } else {
            
    resolve();
          }
        });
      },


      
    // Override to check and renew access token before a network request - if necessary
      
    request: function (options) {
        var 
    me this;

        
    me.checkToken(30).then(function (accessToken) {
          if (
    accessToken) {
            
    Ext.Ajax.setDefaultHeaders({
              
    'Authorization''Bearer ' accessToken
            
    });
          }

          
    // call the original method - but what is the proper way to do so, without breaking anything?
        
    });
      }
    }); 

  2. #2
    Sencha User
    Join Date
    Apr 2013
    Posts
    913
    Answers
    105

    Default

    You can use
    Code:
    Ext.Ajax.on('beforerequest', this.addAuthTokenToRequest, this);
    to add your auth token by modifying options function argument. If you want to use another ajax request to check if token is valid, you will need to cancel current request by returning false from the event handler and then resending the request after you get the token. Check the docs for more info.

  3. #3
    Sencha Premium Member
    Join Date
    Sep 2013
    Posts
    14
    Answers
    2

    Default

    Quote Originally Posted by hakimio View Post
    You can use
    Code:
    Ext.Ajax.on('beforerequest', this.addAuthTokenToRequest, this);
    to add your auth token by modifying options function argument. If you want to use another ajax request to check if token is valid, you will need to cancel current request by returning false from the event handler and then resending the request after you get the token. Check the docs for more info.
    Thanks for the reply.

    I am aware of that possibility - but I would really like - if possible - to have this happen without having to cancel and resume any requests. Just have this async method run before every request is actually sent.

  4. #4
    Sencha User
    Join Date
    Apr 2013
    Posts
    913
    Answers
    105

    Default

    Quote Originally Posted by tgr.joint View Post
    I would really like - if possible - to have this happen without having to cancel and resume any requests. Just have this async method run before every request is actually sent.
    I don't think that's possible.

  5. #5
    Sencha Premium Member
    Join Date
    Sep 2013
    Posts
    14
    Answers
    2

    Default

    Like in all my react applications using axios, I would use something like this:

    PHP Code:
    axios.interceptors.request.use(async (config) => {
      const 
    accessToken await checkToken(30);
      
      if (
    accessToken) {
        
    config.headers.Authorization = `Bearer ${accessToken}`;
      }
      
      return 
    config;
    }); 
    I've tried using a similar pattern with async / await with the beforerequest listener in ExtJS as well, but it didn't have the desired result.

Similar Threads

  1. Deferred - Async requests
    By herme063 in forum Ext JS 6.x Q&A
    Replies: 2
    Last Post: 25 May 2016, 5:32 AM
  2. Replies: 1
    Last Post: 21 Jan 2013, 4:19 PM
  3. Overriding subclass method?
    By djMax in forum Ext 2.x: Help & Discussion
    Replies: 0
    Last Post: 14 Jan 2009, 9:45 AM

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •