How to make the directives react on state changes?

I am using vue-browser-acl’s custom directive as such:

<template>
  <div>
      <BaseSideNavigationMenu v-role:authenticated />
      <PageContent />
  </div>
</template>

With the following setup and rule:

Vue.use(Acl, store.state.currentUser, (acl) => acl.rule("authenticated", () => store.getters.isAuthenticated));

And the following in my store:

export default new Vuex.Store({
  state: {
    currentUser: JSON.parse(window.localStorage.getItem("currentUser") || "{}"),
  },
  mutations: {
    SET_CURRENT_USER(state, user) {
      state.currentUser = user;
      window.localStorage.setItem("currentUser", JSON.stringify(user));
    },
    SET_NO_CURRENT_USER(state) {
      state.currentUser = {};
      window.localStorage.setItem("currentUser", "{}");
    },
  },
  actions: {
    async login({ commit }, login_data) {
      try {
        const response = await axios.post("/api/login", login_data);
        const currentUser = response.data.currentUser
        commit("SET_CURRENT_USER", currentUser);
        return response;
      }
    },
    async logout({ commit }) {
      const response = await axios.post("/api/logout");
      commit("SET_NO_CURRENT_USER");
    },
  },
  getters: {
    isAuthenticated(state) {
      return Object.keys(state.currentUser).length > 0;
    }
  },

However, when a user does a login, the <BaseSideNavigationMenu v-role:authenticated /> element does not show unless the page is refreshed. Likewise, upon logout, the BaseSideNavigationMenu element remains visible until the page is refreshed.

How can vue-browser-acl’s directive be made to react on state changes?

[thapar]

This works reactively as expected. Can the v-role syntax not be reliably used reactively?

I haven’t had any issues with it previously. When you work Vuex and async in general things change a bit. Anyway, I’ll have to look more into to your issue. Thanks for testing the $can part.

Can you try this too:

+<div v-if="authenticated || !authenticated">
    <LoginForm v-role:authenticated.not />
    <LoggedinMenu v-role:authenticated />
+</div>

Where authenticated is the getter from your store.

Never mind the logic. This is just to see what happens if it works after being forced to re-render by a parent. This is to exclude the issue being something else.

Yes, it is reactive with the v-if wrapping.

[thapar]

Can you please test if this works:

<LoginForm v-if="$can('authenticated')" />

This works reactively as expected. Can the v-role syntax not be reliably used reactively?