Vue页面头部导航无法随登录状态实时更新问题求助

我尝试使用v-if指令让页面头部的导航项根据登录状态显示或隐藏，但登录后跳转页面时，判断登录状态的数据无法立即更新，必须刷新页面才会生效。

预期效果 #

• 登录前显示：Home、HALogin、SupLogin
• 登录后显示：Home、Listing、Logout

实际情况 #

• 登录前显示：Home、HALogin、SupLogin
• 登录后显示：Home、HALogin、SupLogin
• 刷新页面后显示：Home、Listing、Logout

MyHeader.vue 代码 #

<template>
  <nav class="navbar navbar-expand navbar-light sticky-top">
    <div class="container">
      <img id="HA-Logo" src="@/assets/HALogo_En.gif" alt="HA Logo" class="">
      <div>
        <ul class="navbar-nav ml-auto">
          <li class="nav-item">
            <router-link to="/" class="nav-link">{{ $t('Home') }}</router-link>
          </li>
          <li class="nav-item">
            <router-link v-if="!currentUser" to="/HALogin" class="nav-link">HALogin</router-link>
          </li>
          <li class="nav-item">
            <router-link v-if="!currentUser" to="/SupLogin" class="nav-link">SupLogin</router-link>
          </li>
          <li class="nav-item">
            <router-link v-if="currentUser" to="/Listing" class="nav-link">Listing</router-link>
          </li>
          <li class="nav-item">
            <router-link v-if="currentUser" @click="logout" to="/" class="nav-link">Logout</router-link>
          </li>
          <li class="nav-item">
            <a class="nav-link"><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>

问题原因 #

currentUser是在组件初始化时从data中读取一次Cookie值，后续Cookie发生变化时不会自动触发currentUser更新，导致模板里的v-if条件始终使用旧状态。你定义的loggedin计算属性虽然能实时读取Cookie，但模板并未使用它做判断。

解决方法 #

方法一：直接使用loggedin计算属性判断 #

修改模板中的v-if条件，用loggedin替代currentUser，同时可以删除data里的currentUser：

<router-link v-if="!loggedin" to="/HALogin" class="nav-link">HALogin</router-link>
<router-link v-if="!loggedin" to="/SupLogin" class="nav-link">SupLogin</router-link>
<router-link v-if="loggedin" to="/Listing" class="nav-link">Listing</router-link>
<router-link v-if="loggedin" @click="logout" to="/" class="nav-link">Logout</router-link>

删除data中的currentUser：

data(){
  return{}
},

方法二：将currentUser改为计算属性 #

如果想保留currentUser变量，把它从data移到computed中，让它实时读取Cookie值：

data(){
  return{}
},
computed: {
  currentUser(){
    return Cookies.get('login')
  },
  loggedin(){
    return typeof this.currentUser === 'undefined' ? false : true
  }
},

这样currentUser会随Cookie变化自动更新，模板里的v-if条件也会实时生效，无需刷新页面。

内容的提问来源于stack exchange，提问作者ka hei tong