Vue 2.x身份驗證鏈接不會隱藏，直到頁面刷新

Question

我是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> 

登錄成功後，我使用this.$router.push("home")導航到家裏組件，但登錄/註銷按鈕不會隱藏/顯示，直到我刷新這一頁。

Answer 1

您遇到的問題是created:掛鉤僅在首次創建App.vue時調用。由於此組件持有router-view，因此您在應用程序中移動時始終存在 - 它永遠不會被破壞，因此永遠不需要再次創建它。因此，您的this.LoggedIn僅在第一次加載應用程序時更新（或者如您發現的那樣，請點擊刷新）。

你需要找到一個不同的方式來更新this.LoggedIn.一個明顯的可能性，它設置它在logih /註銷方法。

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

看起來用戶將在不同的組件登錄，所以你需要從子組件上App.vue發送事件App.vue並引發方法來設置this.LoggedIn當用戶登錄。

現在您可能會想到其他可能性，因爲您明白爲什麼它不起作用。