Dispatched payload converted to [Object object]

Question

I am trying to verify a JWT token each time the created() hook is called:

In my App.vue:

async created() {
if (localStorage.getItem("currentUser") !== null) {
  const token = JSON.parse(localStorage.getItem("currentUser")).token;
  console.log(token); //[CORRECT TOKEN STRING]
  await this.$store.dispatch("tryLogin", token);
}},

In my actions.js:

async tryLogin(context, payload) {
console.log(payload); //[CORRECT TOKEN STRING]
console.log(...payload); //(Spreding does not work)
return context.dispatch("verifyAuth", {
  payload,
});
},

Further down in my actions.js:

 async verifyAuth(context, payload) {
console.log(`inside VerifyAuth ${payload}`); //[Converted to: [object Object]]
// Above log Output: inside VerifyAuth [object Object]
let url = baseURL + "verify-token";
var formdata = new FormData();
formdata.append("token", payload);

const response = await fetch(url, {
  method: "POST",
  headers: {
    Accept: "application/json",
  },
  body: formdata,
  redirect: "follow",
});

const responseData = await response.json();
}

For some reason once I do return context.dispatch("verifyAuth", { payload, }); the payload changes from the actual stored string (token) to [object Object]

I tried spreading the payload which vields the same results. I also tried JSON.parse(console.log("inside VerifyAuth: " + payload)); with no luck Any idea why this is happening?

No. I read though this post and I know that its a string representation of an Object, but what I don't understand is why it is not converted to string with the first `dispatch` and it is on the second — babis95, Aug 03 '21 at 10:10
you know at `console.log(\`inside VerifyAuth ${payload}\`);` payload is an object - because you made it one, right? looks like `{payload: "the token string"}` ... so of course the console.log outputs what it does ... `({}).toString()` is always `[object Object]` ... what if you did `console.log(\`inside VerifyAuth ${payload.payload}\`);` — Bravo, Aug 03 '21 at 10:13
`console.log(\`inside VerifyAuth ${payload}\`);` will *turn your object to a string*. You should instead print the object itself to see it properly: `console.log(\`inside VerifyAuth\`, payload);` — VLAZ, Aug 03 '21 at 10:13
Hi, thank you for your comments. Both `console.log(`inside VerifyAuth ${payload}`);` and `console.log(`inside VerifyAuth`, payload);` vield the same result. The console log is there to simply see the output. Later in the code the `payload` is passed to the API call as a token. But something changed with it once it was `dispatched` because its no longer the token string — babis95, Aug 03 '21 at 10:16
because you turned it into an object at `context.dispatch("verifyAuth", {payload,});` — Bravo, Aug 03 '21 at 10:17

score 1 · Accepted Answer · answered Aug 03 '21 at 10:15

1

The code

context.dispatch("verifyAuth", {payload,});

dispatches an object, i.e. { payload: "the value of the variable payload" }

so, either:

context.dispatch("verifyAuth", payload);

or

async verifyAuth(context, {payload}) {

or

formdata.append("token", payload.payload);

answered Aug 03 '21 at 10:15

Bravo

6,022
1
10
15

You my friend are a Wizzard! Thank you so much for your help! edit: This solves the Issue. Again Thank you very much! – babis95 Aug 03 '21 at 10:18
I was a bit worried when you said `console.log(\`inside VerifyAuth\`, payload);` still outputs `[object Object]` - because it shouldn't – Bravo Aug 03 '21 at 10:19
Yes you are right, I missread your comment and wrote `console.log("inside VerifyAuth" + payload);` Note the `+` hence the same result. – babis95 Aug 03 '21 at 10:21
wasn't my comment, but, yes, that would result in `.toString()` being called on the object too – Bravo Aug 03 '21 at 10:25

Dispatched payload converted to [Object object]

1 Answers1