CODEWITHSUNDEEP
vue.js
jibzy
jibzy

Reputation: 553

how to get local storage token in vue methods property

i've a vue app which requires a token when sending a request each time i try to send a request i keep getting token not defined... here's the error

enter image description here

this how i call my methods property in script tag


<script>
import { mapActions } from "vuex";
import axios from "axios";

export default {
  name: "Products",
  data() {
    return {
      addresses: [],
      products: []
    };
  },
  methods: {
    onDeleteAddress(id, index) {
      axios
        .delete(`http://localhost:5000/api/addresses/${this.$route.params.id}`,
          {
            headers: {
              Authorization: "Bearer" + token,
              "x-access-token": token
            }
          }
        )
        .then(response => {
          console.log(response);
        })
        .catch(error => {
          console.log(error);
        });
    }
  }
};
</script>

this my vue template

 <a href="#" @click="onDeleteAddress(address._id)">Delete</a>

this works in my mounted life cycle hook but when i input it in my methods component i get an error

 const token = localStorage.getItem("token");

please how can i get the token stored in my local storage and define it in my vue methods conponent

Upvotes: 0

Views: 439

Answers (1)

Mohamad Al Zohbie
Mohamad Al Zohbie

Reputation: 601

In first make sure the item is already stored in the localstorage Second instead of calling it from the localstorage it is better to define it in main.js file as global variable so you can use it free every where Example

Vue.prototype.$globalData = Vue.observable({ token: localStorage.getItem("token") });

And now you can use it in your methods like this

this.$globalData.token

You can as much as you want variable in the globalData object

Upvotes: 1

Related Questions