CODEWITHSUNDEEP
vue.jsgoogle-chrome
xander
xander

Reputation: 381

chrome not storing token in local storage in my vue js application

i'm trying to store token in my local storage but google chrome doesn't store the token even after getting a successful response from my backend

this is my template

<br>EMAIL:
    <input type="text" v-model="email">
    <br>PASSWORD:
    <input type="password" v-model="password">
    <br>
    <button @click="submit">signup</button>

this is my script tag, if there's token is should go to the "/" but it keeps redirecting me back to login


<script>
import axios from "axios";
export default {
  data: () => ({
    email: "",
    password: ""
  }),
  methods: {
    async submit() {
      return axios({
        method: "post",
        data: {
          email: this.email,
          password: this.password
        },
        url: "http://localhost:5000/api/auth/login",
        headers: {
          "Content-Type": "application/json"
        }
      })
        .then(res => {
          console.log(res);
          this.$router.push({ path: "/" });
        })
        .catch(error => {
          const message = error.response.data.message;
        });
    },
    clear() {
      this.$refs.form.reset();
    }
  }
};
</script>

this is the response i get in my console

{
    "success": true,
    "token": "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJyZXNldExpbmsiOiJleUpoYkdjaU9pSklVekkxTmlJc0luUjVjQ0k2SWtwWFZDSjkuZXlKZmFXUWlPaUkyTWpJNFlqWXhaakpoWTJJM1lqaGtabVF3WlRKaU5qY2lMQ0pwWVhRaU9qRTJOVGs1T1RVNU56WXNJbVY0Y0NJNk1UWTFPVGs1TmpnM05uMC5DakRLOURoR3FqbTJqLVdNd3dhdUxxdGY2MmV4NVd3VnZtVnEyWlpJNGxzIiwiX2lkIjoiNjIyOGI2MWYyYWNiN2I4ZGZkMGUyYjY3IiwibmFtZSI6InRvYmkiLCJlbWFpbCI6InRvbHVhcmVqaWJhZGV5QGdtYWlsLmNvbSIsInBhc3N3b3JkIjoiJDJhJDEwJDZWbzVYajBJc1JOWG5tbldvb1JMak9qa3AwVnJWQ1QwNnBzcVpBcDZ6RW9HMld1MzUxbm1pIiwiX192IjowLCJpYXQiOjE2NjAwMjcxOTAsImV4cCI6MTY2MDYzMTk5MH0.KaSGPy3arsd5N5Ef-yDgUWV2zpYzuZ16YT1Hqe19eec"
}

even with the token i get if i check my application tab in my dev tools i dont see any token, which means i can't access any of my route please how can i go about this, tried downgrading chrome but still same problem

Upvotes: 1

Views: 1609

Answers (5)

Shashank Saurav
Shashank Saurav

Reputation: 1

res.cookie("jwtoken", token, {
        expires: new Date(Date.now() + 25892000000),
        httpOnly: true,
      });

use this code to store token after generating token in login backend part

Upvotes: -1

Devin Chandrapala
Devin Chandrapala

Reputation: 44

Firstly, in the code you've provided you aren't setting any values into the Local Storage as you've claimed.

To set your token into Local Storage, use this in then then() block:

localStorage.setItem('token', res.token);

Secondly, you haven't added any conditionals to check if a token exists and to redirect to a page based on it, as you've claimed.

Depending on your need, add an if condition and check if the token exists in the Local Storage (and maybe if its valid too), and then specify the redirection.

if (localStorage.getItem('token') && isTokenValid()) {
    this.$router.push({ path: "/" });
} else {
    this.$router.push({ path: "/login" });
}

Upvotes: 1

jibzy
jibzy

Reputation: 553

you are not storing the token in the browser that's why.... in your .then function add

 localStorage.setItem("token", response.data.token);

Upvotes: 1

j-bill
j-bill

Reputation: 51

there is nothing in your code that would suggest that the token is actually saved anywhere. you're just logging out the response data.

localStorage.setItem('token', res.token)

and when you wish to use that token

let token = localStorage.getItem('token')

Upvotes: 1

marek
marek

Reputation: 54

If you want store token to local storage

....
.then(res => {
      console.log(res);
      localStorage.setItem('token', res.token) // you need add this line
      this.$router.push({ path: "/" });
...

Upvotes: 1

Related Questions