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メソッドで設定する可能性があります。

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

あなたはApp.vueに子コンポーネントからイベントを送信し、ユーザーがログインしたときにthis.LoggedInを設定するApp.vue上のメソッドをトリガーする必要がありますので、ユーザーは、別のコンポーネントにログインされますように見えます。

おそらく、なぜそれが機能していないのかを知ることになる他の可能性があります。