Handling unauthorized responses in Vue.js using axios interceptor

When checking my console, I noticed the following error: Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'message') at eval. Below is a snippet from my axios.js file:


axiosIns.interceptors.response.use(
response => {
    if (response.message === 'Unauthenticated') {
        window.location = '/login'
    }

    return response
},
error => {
    if (error.response.message === 'Unauthenticated') {
        window.location = '/login'
    } else if (error.response.status === 401) {
        removeUserData()
        return Promise.reject(error)
    }
})

Answer №1

Consider updating response.message and error.response.message with response.statusText and error.response.statusText.

Answer №2

Could you demonstrate how your client is utilized? I suspect that your function lacks a "catch" statement for handling promises. Remember, you rejected the promise earlier with:

return Promise.reject(error)

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Insert text into the cursor location within Summernote using JQuery

Currently, I am working on a flutter application where I have implemented the summernote editor using JQuery. ClipboardData data = await Clipboard.getData(Clipboard.kTextPlain); String txtIsi = data.text .replaceAll("'", '\&bsol ...

Remove a data entry from the MySQL database by selecting the corresponding row in the table and utilizing the DELETE function

Is there a way to remove a record from my MySQL database by clicking on a row in a table that is generated using ejs? Below is the code I am currently using to generate the table rows. <% res.forEach(function(item){ %> <tr> ...

Navigating to invalid input in VueJs

Can VueJs be used to scrollTo the first input with an invalid class? Currently, I am using window.scrollTo(500, 0);, but I know this is not the proper solution. ...

Confirm the text field input to accept only alphabets, hyphens, and periods

I want to enhance the validation of my text field by restricting it to only allow letters a-z and -. Currently, if the input is invalid, a cross appears, and if it's valid, a check mark appears. However, I need the validation to also check for minimu ...

Autofill Dropdown in AngularJS Using Data from Previous Page

Despite searching extensively on StackOverFlow, I was unable to find the answer I needed. So, I am posting my question below. I have a form that includes a dropdown menu. When a user clicks a button, they are taken to a new HTML page with additional infor ...

Issues with importing Vue.js test units in spec files are causing difficulties

Upon reviewing a demo project, it is evident that: src components ShoppingList.spec.js ShoppingList.vue store __mocks__ index.js index.js ShoppingList.spec.js import { __creareMocks as createMocks ...

Using an object does not result in updated data, while data changes are typically observed when using a variable

In the process of developing a function to update a custom checkbox upon clicking (without resorting to using the native checkbox for specific reasons). Here's the code snippet for the checkbox: <div class="tick-box" :class="{ tick: isTicked }" @ ...

What is the best way to smoothly enlarge a div as new content is introduced?

Is there a way to smoothly expand a div when new content is added? const [render, setRender] = useState(false) const showHide= () => { setRender(!render) } return ( <div className="container"> <h1>TEST ...

What steps can I take to prevent my JavaScript code from interfering with my pre-established CSS styles?

I'm currently designing a mini-email platform that serves as a prototype rather than a fully functional application. The HTML file contains placeholder emails that have been styled to appear presentable. I've implemented an input bar and used Jav ...

Utilizing Highcharts/Highstock for handling large volumes of data efficiently

Dealing with a growing amount of data daily (currently over 200k MySQL rows in one week), the chart loading speed has become quite slow. It seems like using async loading is the solution (http://www.highcharts.com/stock/demo/lazy-loading). I attempted to i ...

Implementing a Next.js server-side permanent redirection instead of displaying a 404 error page

My Next.js application consists of three routes: /home, /about, and /contact. When a user accesses a route that doesn't exist, Next.js automatically redirects them to the 404 page. However, I want to change this behavior and permanently redirect use ...

Creative ways to conceal JavaScript within your Wordpress website

After placing my javascripts in the header.php file, I realized that the code could easily be snatched by viewing the source on any post or homepage... Can you recommend a straightforward method to conceal my javascripts in WordPress and prevent them from ...

The problem I'm facing is that all the data is being received, except for the name, when I start with the success

When I add parameters to the success URL, all data comes through, but when I add a name, it gives an error. I've noticed that if I remove the spaces between letters, it works fine. However, I want to make it function properly. Can you assist me with t ...

What is causing the malfunction in this JavaScript date array?

I'm encountering an issue with my array of dates where they all end up being the same date when I try to retrieve them. var paydates = new Array(); var i; var firstDate = new Date(); firstDate.setFullYear(2010, 11, 26); //setting the initial date as ...

Having trouble establishing a connection between node.js and MongoDB

I've been struggling to connect node.js to mongoDb. Despite trying various solutions like changing the URL from localhost to 127.0.0.1 and downloading different versions of mongo (v6, v5, v4 - the current one), I'm stuck. Interestingly, when I ac ...

Incorporating conditional statements within a loop

I'm racking my brains over this issue, can you lend a hand? Currently, I am extracting data from a website. The .MyElement containers on the site store either gif or jpg URLs that I need to retrieve. In my node.js app, I am utilizing a Cheerio-base ...

Using directive to access service values directly

I am in need of utilizing a directive to fetch and display data using ng-repeat from a service. The anticipated result will be <ul>Days <li>Monday</li> <li>Tuesday</li> ... <ul> <ul>Month <li>January</li ...

Develop a TypeScript class by incorporating a static function from an external library, while ensuring type safety

I am looking to enhance the capabilities of the rxjs5 Observable class by adding a static function. While this can be easily accomplished in plain JavaScript: var myStaticFn = function() { /* ... */ }; Observable.myStaticFn = myStaticFn; this approach w ...

Is Highcharts-angular (Highcharts wrapper for Angular) compatible with Angular 4?

I have attempted to install various versions of highcharts-angular, ranging from 2.0.0 to 2.10.0. However, I consistently encounter the same error when running the application. The error message states: Metadata version mismatch for module C:/dev/Angular- ...

Tips for adding values to an array using an arrow function

Can someone assist me with pushing even numbers into an array using an arrow function? I'm unsure of how to do this. Here's my code: var arrayEvenNumbers = []; var evenNumbers = (arrayEvenNumbers) => { for (i = 2; i <= 20; i++) { i ...