How requests are made is central to the vue-auth plugin so it's important to understand the request/response lifecycle.
Under the hood the, all requests to the API are made using the HTTP driver and all of the methods will always return a Promise.
For more details on individual method options check the Options Guide and Methods Guide.
These will always fire off a request.
By default these will not fire off a request. In order to do so the makeRequest option must be set to true.
Every request follows 6 basic steps which sometimes repeat if additional calls need to be made.
The request is initiated by the HTTP plugin used in the app. When making a method call with the vue-auth plugin this would route through the HTTP driver.
The request intercept fires and checks if a token is set. If set it will pass execution on to the auth driver request method. In there it formats the token for the request.
The HTTP plugin used in the app should receive a response. If this call was initiated by the vue-auth plugin this would continue to be routed via the HTTP driver.
The response intercept will fire and attempt to parse a token if set. If set it will then use the appropriate storage method to store the token for future requests.
If we are making requests through a method in the vue-auth plugin there may be additional calls made. For instance with the login call we may fire a subsequent fetch call. If this is a regular app call this step is omitted.
Finally after all calls are made the promise will resolve and return control back to the initial call.
Let's take a look at a few examples for some of the more commonly used vue-auth plugin methods.
The call to the login method will help to illustrate things a bit better.
this.$auth
.login()
// Request initiated.
// Request intercept has no token so skips.
// Response returned by API.
// Response intercept parses token if set.
// Fire off $auth.fetch() if `fetchUser` is enabled.
// Resolve Promise.
.then(() => {
// do something
});
With the fetch method it follows a similar pattern to the login method call. However, in this case step 5 is omitted since the fetch call doesn't provide any special options for any additional calls.
this.$auth
.fetch()
// Request initiated.
// Request intercept formats token.
// Response returned by API.
// Response intercept has no token so skips.
// Step 5 omitted.
// Resolve Promise.
.then(() => {
// do something
});
We can take a look at the register call as well and see that it follows a similar pattern as the login call. The only difference here being that it may makes two additional calls if autoLogin is enabled.
this.$auth
.register()
// Request initiated.
// Request intercept has no token so skips.
// Response returned by API.
// Response intercept parses token if set.
// Fire off $auth.login() if `autoLogin` is enabled.
// Fire off $auth.fetch() if `fetchUser` is enabled.
// Resolve Promise.
.then(() => {
// do something
});
With the intercepts in place any request made by the app will also follow the procedure above. The one small difference being that step 5 is omitted since the special flags apply to the vue-auth plugin only.
this.$http({
url: 'users/1/fetch'
})
// Request initiated.
// Request intercept formats token if set
// Response returned by API.
// Response intercept parses token if set.
// Omit step 5
// Resolve Promise.
.then(() => {
// do something
});