Vuejs2 Vue 2.x身份验证链接在页面刷新之前不会隐藏

我是Vue新手，创建了一个基本的身份验证应用程序

AuthService.js

module.exports = {
    isLoggedIn: function() {

        if (localStorage.getItem("authUser") != null) {
            return true;
        } else {
            return false;
        }
    },
    Logout: function() {
        localStorage.removeItem("authUser");
    },


}

App.vue

<template>

  <div id="app" >
    <top-progress ref="topProgress"></top-progress>
     <div class="nav is-light is-fixed-top">
      <div class="container">


        <span class="nav-toggle" v-on:click="toggleNav" v-bind:class="{ 'is-active': isActive }">
          <span></span>
          <span></span>
          <span></span>
        </span>

        <div class="nav-right nav-menu" v-bind:class="{ 'is-active': isActive }">

          <router-link v-ripple to="/" class="nav-item r-item"><i class="fa fa-home"></i>Home</router-link>
          <router-link  v-ripple to="faq" class="nav-item r-item"><i class="fa fa-file"></i>Features</router-link>
          <router-link v-ripple  to="dashboard" class="nav-item r-item"><i class="fa fa-dashcube"></i>Dashboard</router-link>
          <router-link v-ripple to="faq" class="nav-item r-item"><i class="fa fa-quora"></i>Faq</router-link>
          <a class="nav-item r-item" v-if="LoggedIn"><i class="fa fa-sign-out" @click.prevent="Logout"></i>Logout</a>
          <div class="nav-item" v-if="!LoggedIn">
            <p class="control">
            <router-link to="login" class="button is-primary is-outlined">
            <span class="icon">
                   <i class="fa fa-download"></i>
                </span>
             <span>  Join Now</span>
               </router-link>

            </p>
          </div>

        </div>
      </div>
    </div>


  <br>
    <router-view></router-view>
    <footer class="footer is-secondary">
      <div class="container">
        <div class="columns">
          <div class="column">
            <p>And this right here is a spiffy footer, where you can put stuff.</p>
          </div>
          <div class="column has-text-right">
            <a class="icon" href="#"><i class="fa fa-facebook"></i></a>
            <a class="icon" href="#"><i class="fa fa-twitter"></i></a>
          </div>
        </div>
      </div>

    </footer>
  </div>

</template>

<script>
import {isLoggedIn,Logout} from "./service"

import miniToastr from 'mini-toastr'
import topProgress from 'vue-top-progress'
export default {
  name: 'app',
  components:{topProgress},
  data:function(){
    return {
      isActive:false,
      LoggedIn:false,

    }
  },
  created(){

    this.LoggedIn=isLoggedIn();
  },
  mounted(){
     miniToastr.init()
     this.$refs.topProgress.start()
      setTimeout(() => {
      this.$refs.topProgress.done()
    }, 2000)
  },
  methods:{

     Logout:function(){
        Logout();
        this.$router.push("login");
    },

  }
}
</script>
<style lang="sass">
   ..//
</style>

家
特征
仪表板
常见问题
从“/service”导入{isLoggedIn，注销}
从“迷你toastr”导入迷你toastr
从“vue top progress”导入topProgress
导出默认值{
名称：“应用程序”，
组件：{topProgress}，
数据：函数（）{
返回{
I：错，
洛格丁：错，
}
},
创建（）{
this.LoggedIn=isLoggedIn（）；
},
安装的（）{
miniToastr.init（）
此.$refs.topProgress.start（）
设置超时（（）=>{
此.$refs.topProgress.done（）
}, 2000)
},
方法：{
注销：函数（）{
注销（）；
这是$router.push（“登录”）；
},
}
}
..//

---

成功登录后，我使用

this.$router.push（“主页”）

导航到主页组件，但在刷新页面之前，登录/注销按钮不会隐藏/显示

您遇到的问题是

已创建：

仅在首次创建

App.vue

时才会调用挂钩。由于此组件拥有

路由器视图

，因此当您在应用程序中移动时，它始终在那里-它不会被破坏，因此不需要再次创建。因此，您的

this.LoggedIn

仅在您首次加载应用程序时更新（或者如您所发现的，点击刷新）

您需要找到一种不同的方法来更新

this.LoggedIn。

一种明显的可能性是在logih/logout方法中设置它

Logout:function(){
    Logout();
    this.LoggedIn = isLoggedIn(); // or simply this.LoggedIn = false
    this.$router.push("login");
},

看起来用户将在不同的组件中登录，因此您需要将一个事件从子组件发送到

App.vue

，并在

App.vue

上触发一个方法，以便在用户登录时设置

this.LoggedIn

现在你知道为什么它不起作用了，你可能会想到其他的可能性