I am utilizing vue-resource to retrieve data from the server. In order to access the correct data, a user must possess a JWT token. If the token is invalid or has expired, a status code of 401 will be returned. Similarly, if a user attempts to reach a forbidden page, a status code of 403 will be returned.
I aim to capture these errors and manage them in a global manner. This implies that any calls should be handled entirely by the interceptor (for 401 and 403 errors).
How can I avoid the browser message "Uncaught (in promise)" and establish a system for global error handling? I prefer not to implement a local error handler for every individual call.
The current interceptor setup:
Vue.http.interceptors.push(function (request, next) {
request.headers.set('Authorization', Auth.getAuthHeader());
next(function (response) {
if (response.status === 401 || response.status === 403) {
console.log('You are not logged in or do not have the rights to access this site.');
}
});
});
Additionally, here is the method within Vue:
methods: {
user: function () {
this.$http.get('http://localhost:8080/auth/user').then(function (response) {
console.log(response);
});
}
}