how can i display an element if token is stored in browser using vuejs-CodePudding

i'm trying to display this div tag when a token is stored in my browser

 <div>
<h4>hello</h4>
 </div>

i get token in my browser

eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJfaWQiOiI2MzA3NjZmZDM2MGI4NDBmMmYxMmQzYzEiLCJuYW1lIjoidG9sdSIsImVtYWlsIjoidG9sd```

this is my script tag


<script>
export default {
  name: "app",
  components: {},
  data() {
    return {
    };
  },
  mounted() {
    const token = localStorage.getItem("token")
  },
 
};
</script>

please how can i go about this

CodePudding user response：

You need to store the token in a reactive variable (preferably in the store so you can access it globally, but you can also just store in for this specific page):

<script>
export default {
  name: "app",
  components: {},
  data() {
    return {
        token: null
    };
  },
  mounted() {
    const token = localStorage.getItem("token")
    this.token = token
  },
 
};
</script>

Then you can use this in your template:

<div v-if="token">
  <h4>hello</h4>
</div>
<div v-else>
  Not logged in
</div>