Having trouble with Vue and Vuex not returning the correct value in HTML?

Question

Having trouble with Vue and Vuex not returning the correct value in HTML?

I've implemented a navbar that displays specific menu items based on the user's role.

Below is the simplified HTML code for the navbar:

<v-speed-dial class="speed-dial-container contextual-text-menu" v-if="user && user.emailVerified" fixed top right
  direction="bottom" transition="slide-y-transition">
  
<v-icon v-if="checkAuthorization(['superAdmin', 'admin', 'pastor', 'member']) === true" class="mt-2"
    @click="sendComponent({ component: 'Dashboard' })">$admin</v-icon>
  
</v-speed-dial>

Here is my method:

async checkAuthorization(permissions) {
  if (permissions.length > 0) {
    const temp = await this.$store.dispatch('UserData/isAuthorized', permissions)
    return temp
  }
},

Vuex store setup:

isAuthorized({
  state
}, permissions) {
  const userRoles = state.roles
  if (permissions && userRoles) {
    const found = userRoles.some(r => permissions.includes(r))
    return found
  }
},

Even though all console logs display the correct values, the menu items in the HTML do not update accordingly.

For instance, after adding 'member' to

checkAuthorization(['superAdmin', 'admin', 'pastor', 'member']) === true

, and logging in with only the 'member' role, all console logs indicate true. Despite this, the expected menu item does not appear as intended.

javascript vue.js vuejs2 vue-component vuex

Answer 1

Answer №1

It was mentioned in the comments that checkAuthorization is an asynchronous function and will return a Promise, so checking for promise === true is not valid.

In addition to that, I suggest changing isAuthorized to be a vuex getter instead of an action. For example:

getters: {
  // ...
  isAuthorized: (state) => (permissions) => {
    if (permissions && state.roles) {
      return state.roles.some(r => permissions.includes(r))
    }
    return false;
  }
}

Furthermore, update checkAuthorization to no longer return a promise like this:

function checkAuthorization(permissions) {
  if (permissions.length > 0) {
    return this.$store.getters.isAuthorized(permissions);
  }
  return false;
}

Answer 2

It was mentioned in the comments that checkAuthorization is an asynchronous function and will return a Promise, so checking for promise === true is not valid.

In addition to that, I suggest changing isAuthorized to be a vuex getter instead of an action. For example:

getters: {
  // ...
  isAuthorized: (state) => (permissions) => {
    if (permissions && state.roles) {
      return state.roles.some(r => permissions.includes(r))
    }
    return false;
  }
}

Furthermore, update checkAuthorization to no longer return a promise like this:

function checkAuthorization(permissions) {
  if (permissions.length > 0) {
    return this.$store.getters.isAuthorized(permissions);
  }
  return false;
}

Answer 3

Answer №2

My typical practice :

I include a new user state labeled as Unknown and set it as the default state.

In my main.js (or main.ts) file, I trigger state.initialize(), which defines the user's state.

The crucial step is implementing navigation guards. Rather than checking routing guards on router-link (or URL or any other location at this stage), it is recommended to define them in the router itself. Utilize the router.beforeEach function to verify if the user has permission to access that route, and redirect them to a 401 page if necessary.

https://router.vuejs.org/guide/advanced/navigation-guards.html

Answer 4

My typical practice :

I include a new user state labeled as Unknown and set it as the default state.

In my main.js (or main.ts) file, I trigger state.initialize(), which defines the user's state.

The crucial step is implementing navigation guards. Rather than checking routing guards on router-link (or URL or any other location at this stage), it is recommended to define them in the router itself. Utilize the router.beforeEach function to verify if the user has permission to access that route, and redirect them to a 401 page if necessary.

https://router.vuejs.org/guide/advanced/navigation-guards.html

Having trouble with Vue and Vuex not returning the correct value in HTML?

Answer №1

Answer №2

Similar questions

Is there a way to load an image asynchronously when the page loads and show a loading gif during the loading process?

Express.js application experiencing technical difficulties

Presenting quiz questions using javascript

The vue element el-select is not displaying the label based on the v-model

Pause until the existence of document.body is confirmed

Stuck on AMChart while trying to load data

Can I link the accordion title to a different webpage?

Proper method for incorporating loading and error messages with the help of useContext and react hooks

My JavaScript code is being executed before Chrome Auto-fill

Creating a text file while in a suspended state within the event handler on Windows 8 using HTML5

Nested V-If statements inside of a double V-For loop

What is the method to modify the background color of el-pagination?

Limit the Datepicker in MUI (v5) to only accept two-digit years

Tips for updating a reactive form with multiple layers of nested JSON values

What is the method for transmitting a message from localhost to a React frontend?

What is the best way to invoke a function only once in typescript?

The failure to build was due to the absence of the export of ParsedQs from express-serve-static-core

Can you explain the purpose of the statement `var MyConstructor = function MyConstructor()`?

Steps for storing an image file using Vue JS and my token

Using dynamic jquery to target specific elements. How can we apply jquery to selected elements only?