I am trying to make my header show or not show some nav-item according to the login state(using v-if). However, when I route to the page that logged in, the data to determine whether user logged in didn't update immediately, I need to refresh to update the data.

Expected:

1. before login, showing: Home Login
2. after login, showing: Home Listing Logout

Realistic:

1. before login, showing: Home Login
2. after login, showing: Home Login
3. Refresh the page, showing: Home Listing Logout

MyHeader.vue

<template>
  <nav >
    <div >

      
      <img id="HA-Logo" src="@/assets/HALogo_En.gif" alt="HA Logo" >

      <div>
        <ul >
          <li >
            <router-link to="/" >{{ $t('Home') }}</router-link>
          </li>
          <li >
            <router-link v-if="!currentUser" to="/HALogin" >HALogin</router-link>
          </li>
          <li >
            <router-link v-if="!currentUser" to="/SupLogin" >SupLogin</router-link>
          </li>
          <li >
            <router-link v-if="currentUser" to="/Listing" >Listing</router-link>
          </li>
          <li >
            <router-link v-if="currentUser" @click="logout" to="/" >Logout</router-link>
          </li>
          <li >
            <a ><LocaleSwitcher /></a>
          </li>
          <button @click="check">bug</button>
        </ul>
      </div>
    </div>
  </nav>
  
</template>

<script>
import Cookies from 'js-cookie';
import LocaleSwitcher from './LocaleSwitcher.vue';
import SideNav from './SideNav.vue';

export default {
    name: "MyHeader",
    components: { LocaleSwitcher, SideNav },
    data(){
      return{
        currentUser: Cookies.get('login')
      }
    },
    computed: {
      loggedin(){
        return typeof Cookies.get('login') === 'undefined' ? false : true
      }
    },
    methods: {
      logout(){
        console.log("Cookies.get('login'): ", Cookies.get('login'));

        Cookies.remove('login');
      },
      check(){
        console.log("loggedin: ",this.loggedin);
        console.log("typeof Cookies.get('login') === 'undefined': ", typeof Cookies.get('login') === 'undefined')
        console.log("cookies: ",Cookies.get('login'))
      }
    },

}
</script>

CodePudding user response：

You can use lifecycle hook like beforeCreate go get data from cookies.

export default {
    name: "MyHeader",
    components: { LocaleSwitcher, SideNav },
    data(){
      return{
        currentUser: Cookies.get('login')
      }
    },
    beforeCreate() {
        this.currentUser = Cookies.get('login')
    },
    computed: {
      loggedin(){
        return typeof Cookies.get('login') === 'undefined' ? false : true
      }
    },
    ...
}

beforeCreate is called immediately when the instance is initialized, after props resolution, before processing other options such as data() or computed.

CodePudding user response：

cookies are not reactive so Vue will not detect them changing which is why a refresh is required. You will either need a library like vue-cookies-reactive or try a different strategy. One alternative could be to store the logged in user data in a store (e.g. vuex or pinia) so when the cookie is set, you also set data in the store, and since the store state is reactive if you watch that instead of the cookie you'll have the desired reactive update to your page. Cookies (and localStorage) are still a good way to persist state across page refreshes so it's not a bad idea to use both cookies and a store.