Switch directions following a successful status code of 200

After successfully logging in (with a status of 200), I want to change my route to /expenses.

async SendLogin() {
  const response = await axios.post("api/auth/login", {
    email: this.email,
    password: this.password,
  });
  localStorage.setItem("token", response.data.token);

  const status = JSON.parse(response.data.response.status);
  if (status == "200") {
    this.$router.push("/expenses");
  } else {
    showError(true), setTimeout(showError(false), 3000);
  }
},

When I log in and inspect in my browser, I receive the following message:

{data: {...}, status: 200, statusText: "OK", headers: {...}, config: {...}, ...}

[Vue warn]: Error in v-on handler (Promise/async): "TypeError: Cannot read property 'status' of undefined"

Answer №1

Make sure to use response.status or consider using a simple check...

if (response.ok) {
  /* perform an action */
} else {
  /* perform another action */
}

response.ok is similar to what you have in statusText: ok:

{data: {...}, status: 200, statusText: "ok", .... }

Answer №2

It appears that the value of response.data.response.status is not defined.

To troubleshoot, include a console.log(response) above the calling line to verify the proper data structure.

The correct property likely should be accessed as response.status

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

My Next.js application does not display an error message when the input field is not valid

I've recently developed a currency converter application. It functions properly when a number is provided as input. However, in cases where the user enters anything other than a number or leaves the input field empty, the app fails to respond. I aim t ...

The unresponsive sticky navigation bar on a Joomla website is causing issues

I recently launched a new website that can be found here. The site includes the following JavaScript code: $(document).ready(function(){ $(window).bind('scroll', function() { var navHeight = $( window ).height() - 70; ...

The hamburger menu on the responsive navbar fails to open when clicked on

Having an issue with my navbar in mobile and responsive environments. The hamburger menu shows up, but when clicked on, the links are not displayed. Below is the code that I am using, all the necessary links are included but the menu is not functioning pro ...

The PHP script encountered an issue with the HTTP response code while processing the AJAX contact form, specifically

Struggling to make this contact form function properly, I've tried to follow the example provided at . Unfortunately, all my efforts lead to a fatal error: "Call to undefined function http_response_code() in /hermes/bosoraweb183/b1669/ipg.tenkakletcom ...

Is there a common method for generating complex identifiers to be used as the HTML element's id, class, or name attributes

Is there a recommended method for "encoding" complex identifiers such as {Source:"ARCH.1", Code: "456-789.456 A+", SubNumber:##2} to be used in HTML elements' id, class, and name attributes? I could come up with something myself, but perhaps there is ...

Unable to generate a select element using the JSON data retrieved from an Ajax request

After making an AJAX call to fetch some JSON objects, I successfully retrieve them. However, I encountered an issue while trying to generate a select element from the returned JSON - it doesn't seem to create one. This is what my JavaScript looks lik ...

Generate a high-resolution image using PhaserJS

I've been experimenting with creating graphics using PhaserJS and now I'm looking for a way to export them as high-resolution images or, even better, as vector-based graphics. Here's an example of the code I've been working on: var con ...

Encountering an error: Module missing after implementing state syntax

My browser console is showing the error message: Uncaught Error: Cannot find module "./components/search_bar" As I dive into learning ReactJS and attempt to create a basic component, this error pops up. It appears after using the state syntax within my ...

What is the best method to retrieve the initial elements from an array before proceeding to fetch the subsequent ones?

I'm currently in the process of setting up my blog page on my website, and I have a posts folder containing markdown files for all my blogs. I'm trying to find a way to efficiently display these blogs on a single page by initially loading only th ...

Ways to remove unnecessary spaces from a JSON Object

I have a generic ajax.post method that takes in data from a function parameter. I'm looking to trim the data properties within the function. Here's the current code snippet: function PostToServer(options) { var defaults = { 'url ...

What are the steps for integrating an external API into a React project?

Apologies for any potential repetition, as this question may be commonly asked. I am currently working with React, Express, CORS, node, and postgres databases. My objective is to utilize the following API to retrieve real-time prices for metals: https://me ...

Encountering an issue in WebStorm where the directory '@' cannot be resolved for a Vue file

Currently working with WebStorm version 2021.2.4, and while attempting to create a Vue.js 3 application, I encountered the following error: The issue seems to be that the IDE is unable to recognize @ as the root directory src. Any suggestions on how to re ...

Utilize JavaScript to seamlessly play a Spotify track within the Spotify client without disrupting your current

A little while back, I recall the simplicity of clicking play on a song within a website and having it instantly start playing on my computer without any additional steps. It was seamless and effortless. My goal for my website is to have music start playi ...

Refactor Print Preview Graph Display Issue within Nested Vue Component

I seem to be having trouble accessing this function properly due to an error. I am unsure of how to troubleshoot this issue and determine the correct solution. Any guidance would be greatly appreciated. The component PerformanceDonut.vue is located within ...

Incorporating JavaScript to dynamically load an HTML page into an iframe

I am attempting to have each option load a unique page within a frame <!DOCTYPE html> <html> <head> <script> function selectCountry() { var mylist=document.getElementById("country"); document.getElementById("frame").src=mylist.opti ...

Verifying the activation status of a button within a Chrome extension

I have been working on a chrome plugin that continuously checks the status of a button to see if it is enabled. If it is, the plugin clicks on the button. I initially used an infinite for loop for this task, but realized that it was causing the browser to ...

vue Error: Attempting to access properties of an undefined object (specifically, 'NormalModule')

Working on a small web app written in vue, I utilize two different machines for testing and development. Github serves as a convenient platform for me to seamlessly switch between the two. Previously, I encountered no issues while working on my macos mach ...

Create a JavaScript variable that is initialized with a value from an AngularJS scope

What is the best way to assign a value from an AngularJS scope variable to a JavaScript variable? For example: xyz.controller({ $scope.country = "Canada"; }); Here's how you can do it in JavaScript: <script> var country = {{scope.countr ...

Tips for storing a JSON file with GridFS

In my possession is an extensive dataset. Utilizing mongoose schemas, each data element has a structure resembling the following: { field1: “>HWI-ST700660_96:2:1101:1455:2154#5@0/1”: field2: “GAA…..GAATG” } Reference: Re ...

What could be causing my callback function to fail when used within a nested function?

I am currently utilizing the callback function in conjunction with Socket.io as shown below: loadData(callback) { var client = new SyncClient(this.socket, this.project); this.client = client; //From my data function client.on("connected", () => { ...