Vue.js: Dynamically display buttons in the navigation bar depending on the user's login status through Vuex Store state

Question

Vue.js: Dynamically display buttons in the navigation bar depending on the user's login status through Vuex Store state

I am currently in the process of creating a navigation bar that displays different buttons based on whether the user is logged in or not. To achieve this, I am utilizing Vuex and localStorage to manage the state.

My goal is to develop a dynamic menu using a list of objects (referred to as rightMenu) which includes information about each button such as route, title, and a flag indicating whether the button should be displayed when the user is logged in.

After a user logs into the system, the

this.$store.state.auth.isUserLoggedIn

changes to true. However, the template does not update accordingly, resulting in the buttons remaining in their initial state from when the user was not logged in. For instance, the 'sign out' button doesn't appear even after the

this.$store.state.auth.isUserLoggedIn

updates. Only upon manually reloading the page with 'ctrl+F5', do the buttons display correctly.

In order to tackle this issue, I am considering forcing a page reload whenever a user logs in or out, although I realize this may not be the best solution.

Is there anyone who could offer assistance?

Below is the code snippet that I am currently working with:

Menu.vue > template

<div>
    <v-toolbar color='grey darken-3' dark>
        <v-toolbar-title>Site</v-toolbar-title>

        ...

        <v-toolbar-items class='hidden-sm-and-down'>
            <v-btn v-for='item in rightMenu' :key='item.title'
                   :to='item.to' v-if='item.showButton' flat>
                   {{ item.title }}
            </v-btn>
        </v-toolbar-items>

    </v-toolbar>

    <router-view/>
</div>

Menu.vue > script

export default {
  data () {
    return {
      rightMenu: [
        { to: '/sign_in', title: 'sign in'
          showButton: !this.$store.state.auth.isUserLoggedIn },
        { to: '/sign_up', title: 'sign up'
          showButton: !this.$store.state.auth.isUserLoggedIn },
        { to: '/sign_out', title: 'sign out'
          showButton: this.$store.state.auth.isUserLoggedIn }
      ]
    }
  },
  ...
}

store.js

const store = new Vuex.Store({
  state: {
    auth: {
      token: '',
      isUserLoggedIn: false
    }
  },
  mutations: {
    setAuthToken (state, token) {  
      state.auth.token = token
      state.auth.isUserLoggedIn = !!token
      localStorage.setItem('store', JSON.stringify(state))
    },
    cleanAuth (state) {  
      state.auth = {
        token: '',
        isUserLoggedIn: false
      }
      localStorage.setItem('store', JSON.stringify(state))
    }
  }
  ...
})

EDIT 1:

By directly referencing

this.$store.state.auth.isUserLoggedIn

in my code, the button visibility works as expected. An example is provided below:

Menu.vue > template

<v-toolbar-items class='hidden-sm-and-down'>
    <v-btn v-if='this.$store.state.auth.isUserLoggedIn' flat> 
      Test {{ this.$store.state.auth.isUserLoggedIn }}
    </v-btn>
</v-toolbar-items>

This leads me to believe that the issue lies in the binding between showButton and

this.$store.state.auth.isUserLoggedIn

.

javascript vue.js local-storage vuex vue-cli-3

Answer 1

Answer №1

Utilize the computed property in order to create a reactive effect:

<template>
...
<v-btn v-for='item in rightMenu' :key='item.title'
  :to='item.to' v-if='isUserLoggedIn(item.title)' flat>
  {{ item.title }}
</v-btn>
...
</template>

<script>
...
computed: {
  isUserLoggedIn() {
    return (title) => { // no caching benefits will be available
      if (title === 'sign out') {
        return this.$store.state.auth.isUserLoggedIn;
      }
      return !this.$store.state.auth.isUserLoggedIn;
    }
  }
}
...
</script>

Answer 2

Utilize the computed property in order to create a reactive effect:

<template>
...
<v-btn v-for='item in rightMenu' :key='item.title'
  :to='item.to' v-if='isUserLoggedIn(item.title)' flat>
  {{ item.title }}
</v-btn>
...
</template>

<script>
...
computed: {
  isUserLoggedIn() {
    return (title) => { // no caching benefits will be available
      if (title === 'sign out') {
        return this.$store.state.auth.isUserLoggedIn;
      }
      return !this.$store.state.auth.isUserLoggedIn;
    }
  }
}
...
</script>

Answer 3

Answer №2

Thanks to the valuable insights provided by Chris Li, Andrei Gheorghiu, and Sajib Khan, I was able to successfully resolve my issue.

Andrei Gheorghiu emphasized that accessing computed properties in data() is not possible, while Chris Li suggested using a computed variable instead. By combining their suggestions with an example from Sajib Khan, I was able to devise a solution, which I am sharing below in the hopes that it may benefit others facing a similar challenge.

In essence, I created a computed property that returns an array, ensuring that whenever

this.$store.state.auth.isUserLoggedIn

updates, the array also updates accordingly, thereby affecting the menu as well.

I plan to implement a mapGetter for

this.$store.state.auth.isUserLoggedIn

. Once I have done so, I will update this answer.

Many thanks to all of you for your assistance.

<script>
export default {
  data () {
    return { ... }
  },
  computed: {
    rightMenu () {
      return [
        { title: 'sign_in', to: '/sign_in', 
            showButton: !this.$store.state.auth.isUserLoggedIn },
        { title: 'sign_up', to: '/sign_up', 
            showButton: !this.$store.state.auth.isUserLoggedIn },
        { title: 'sign_out', to: '/sign_out',
            showButton: this.$store.state.auth.isUserLoggedIn }
      ]
    }
  }
}
</script>

EDIT 1: Solution using mapGetters

Menu.vue

<script>
import { mapGetters } from 'vuex'

export default {
  data () {
    return { ... }
  },
  computed: {
    ...mapGetters([
      'isUserLoggedIn'
    ]),
    rightMenu () {
      return [
        { title: 'sign_in', to: '/sign_in', 
            showButton: !this.$store.state.auth.isUserLoggedIn },
        { title: 'sign_up', to: '/sign_up', 
            showButton: !this.$store.state.auth.isUserLoggedIn },
        { title: 'sign_out', to: '/sign_out',
            showButton: this.$store.state.auth.isUserLoggedIn }
      ]
    }
  }
}
</script>

store.js

The following getter has been added:

...
getters: {
  isUserLoggedIn (state) {
    return state.auth.isUserLoggedIn
  }
}
...

Answer 4

Thanks to the valuable insights provided by Chris Li, Andrei Gheorghiu, and Sajib Khan, I was able to successfully resolve my issue.

Andrei Gheorghiu emphasized that accessing computed properties in data() is not possible, while Chris Li suggested using a computed variable instead. By combining their suggestions with an example from Sajib Khan, I was able to devise a solution, which I am sharing below in the hopes that it may benefit others facing a similar challenge.

In essence, I created a computed property that returns an array, ensuring that whenever

this.$store.state.auth.isUserLoggedIn

updates, the array also updates accordingly, thereby affecting the menu as well.

I plan to implement a mapGetter for

this.$store.state.auth.isUserLoggedIn

. Once I have done so, I will update this answer.

Many thanks to all of you for your assistance.

<script>
export default {
  data () {
    return { ... }
  },
  computed: {
    rightMenu () {
      return [
        { title: 'sign_in', to: '/sign_in', 
            showButton: !this.$store.state.auth.isUserLoggedIn },
        { title: 'sign_up', to: '/sign_up', 
            showButton: !this.$store.state.auth.isUserLoggedIn },
        { title: 'sign_out', to: '/sign_out',
            showButton: this.$store.state.auth.isUserLoggedIn }
      ]
    }
  }
}
</script>

EDIT 1: Solution using mapGetters

Menu.vue

<script>
import { mapGetters } from 'vuex'

export default {
  data () {
    return { ... }
  },
  computed: {
    ...mapGetters([
      'isUserLoggedIn'
    ]),
    rightMenu () {
      return [
        { title: 'sign_in', to: '/sign_in', 
            showButton: !this.$store.state.auth.isUserLoggedIn },
        { title: 'sign_up', to: '/sign_up', 
            showButton: !this.$store.state.auth.isUserLoggedIn },
        { title: 'sign_out', to: '/sign_out',
            showButton: this.$store.state.auth.isUserLoggedIn }
      ]
    }
  }
}
</script>

store.js

The following getter has been added:

...
getters: {
  isUserLoggedIn (state) {
    return state.auth.isUserLoggedIn
  }
}
...

Vue.js: Dynamically display buttons in the navigation bar depending on the user's login status through Vuex Store state

Answer №1

Answer №2

Similar questions

Using AJAX along with the append method to dynamically add identical HTML content multiple times to a single element

In mongoose and nodejs, there is no method called .find()

Creating a notification for specific choices in a dropdown menu

What causes a React Native wrapped component to re-render consistently?

Using browserify "require" in console: A step-by-step guide

Ways to implement a resize function in Angular JS without relying on the document and window objects

An error occurs when attempting to assign a value to a MUI file TextField

Event listener is failing to trigger when clicked in content script and directed to popup on Google Chrome Extension

Is it possible to customize the appearance of the selected item in a select box? Can the selected value be displayed differently from the other options?

Display a PHP file's content in an iframe without revealing the file path in the source code

The Magic of Javascript Routing with Regex Implementation

Trouble with mobile compatibility for .json file content population in HTML elements script

Safari experiencing CORS violation while Chrome is unaffected

Exploring the Potential of Mobile Development using AngularJS

Scrolling up or down in an HTML webpage using a script

Utilizing Angular 2+ to effectively manipulate the HTML Document Object Model with JavaScript in order to execute scripts

What is the best way to use AJAX to navigate to a different webpage while sending data along with

Is it advisable to use the return statement immediately following res.render in app.js?

Error Message: The function "menu" is not a valid function

Extract data from a JSON file and refine an array