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

user_19320211 0
Viewed 65

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

vue.js google-chrome
4 Answers

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: "/" });
...
user_36201390

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')
user_133801260

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

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

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" });
}
user_155298690
Related