[VueJS] Hide the link in the right panel if the user is logged out (how to refresh panel ?)

Questions
1

Hello,

First of all, thank you for this very good framework.

Let me explain, I have a vuejs application with a panel on the right. In this panel, I added a disconnection link for the user. Now, I would like to hide it when it is disconnected. I know if the user is connected when his token exists in the localstorage.

So, I tried to use v-show on localstorage but it doesn’t work :confused:

For more information, here is the line I use to retrieve my token. If present, the boolean isUserAuthentificated is equal to true :

JSON.parse(localStorage.OAuthData).accessToken

Here is the code of my panel :

<template>
  <f7-page>
    <f7-navbar title="Left Panel" class="color-theme-green"></f7-navbar>
    <f7-block-title>Account</f7-block-title>
    <f7-list>
      <f7-list-item link="/logout/">Language</f7-list-item>
      <f7-list-item v-on:click="spotifyLogout">Logout</f7-list-item>
    </f7-list>
  </f7-page>
</template>
<script>
export default {
  methods: {
    spotifyLogout: function() {
      window.cordova.plugins.spotifyAuth.forget();
      this.$f7.views.main.router.navigate('/');
      this.$f7.panel.close();
    }
  },
}
</script>

My question is therefore the following, what would you advise me to hide the “logout” link if the user is not yet logged in please?

Best regards,

2

v-if, or v-show could help.
You could set a boolean in your data prpoerties, when logged out, set it to true, then when the component is mounted, you check to see if it is true or false… v-if is basically dependant on a boolean

3

Thank you for your response @Max

As indicated in my first message, this is something (v-if & v-show) I thought about.

The component seems to be mounted only when the application starts. So, the data is therefore not refreshed. That’s why I’m not able to change the state of the boolean.

4

Have you tried using Vuex to manage the state of your app?

5

If you have a big app or already implemented Vuex you should go with max solution using Vuex.

here you have a simple example using vue reactivity

jsfiddle

1 Like
6

Thank you for your answers. I think vuex is a better solution, i’ll try it.

Concerning the JS fiddle it works, because there is an action on the part of the user. In my case, I want to recover this from the localstorage dynamically without any action on the part of the user.

7

https://flaviocopes.com/vuex-persist-localstorage/… you can even persist your state in vuex using this plugin