0

I have a vue web app that uses axios to communicate with an API. The authentication is handled by the server, and not by my app. That is, the server ensures that the user cannot see the app before they have authenticated.

Of course, after some time the user's authentication token expires and my app only notices this when it fires off a get/post request to the API. When this happens the axios request returns a redirect to a login page that, when printed to the console, looks something like this:

config: Object { url: "https://...url for my request...", 
  method: "get", baseURL: "...base url for api", … }
  data: "<!DOCTYPE HTML PUBLIC \"-//W3C//DTD HTML 4.0 Transitional//EN\" \"http://www.w3.org/TR/REC-html40/loose.dtd\">\n<HTML>\n<HEAD>\n<TITLE>Need Authentication</TITLE>\n<link rel=\"stylesheet\" href=\"/Steely.css\" type=\"text/css\">\n</HEAD>\n<BODY>....</BODY>\n</HTML>\n"
headers: Object { 
   connection: "Keep-Alive", 
   "content-encoding": "gzip", "content-length": "1686", … 
}
request: XMLHttpRequest { 
  readyState: 4, timeout: 0, withCredentials: false, … 
}
status: 200
statusText: "OK"
<prototype>: Object { … }
app~d0ae3f07.235327a9.js:1:97292

What is the best way to redirect the user to this login page and then resume my original request? At the moment I am not even succeeding in recognising this. My axios code tries, and fails, to recognise when this happens and then redirect to user a vue component that has a login page. The relevant part of code looks like this:

export default new class MyAPI {
  constructor() {
    this.axios = axios.create({
      headers: {
        'Accept': 'application/json',
        'Cache-Control': 'no-cache',
        'Content-Type': 'application/json',
      },
      baseURL: `https://.../api`,
    });
  }

  // send a get request to the API
  GET(command) {
    return new Promise((resolve, reject) => {
      this.axios.get(command)
        .then((response) => {
          if (response && response.status === 200) {
            if ( response.data && typeof response.data == 'string' && response.data.includes('Require authentication') ) {
                store.dispatch('authenticate', this.baseURL+'/'+command).then( (resp) => resolve(resp.data) )
            } else {
                resolve(response.data);
            }
          } else {
            reject(response.data);
          }
        })
        .catch((err) => { reject('Internal error'+err); });
    });
  }
}

This results in the dreaded

Internal errorTypeError: e(...) is undefined

error, although this error is almost certainly triggered further down the code since I not recognising the login authentication request.

Is anyone able to recommend how best to recognise and process the login request?

Andrew
  • 281
  • 4
  • 16
  • 2
    The absolute best way is to have your server return [the appropriate status code](https://stackoverflow.com/questions/3297048/403-forbidden-vs-401-unauthorized-http-responses) instead of 200. 200 means the API request succeeded, but here it did not. – Etheryte Sep 01 '19 at 14:20
  • @Nit Thanks. Unfortunately, the server is not under my control... – Andrew Sep 02 '19 at 04:28
  • You can't see if page have been redirected or not with axios ... Personaly i store the epotetical token expiration date when my user log in, and redirect juste before the token expire ... bad solution for bad issue ... – Andrelec1 Sep 02 '19 at 12:47

0 Answers0