Verstecke eine VueJS-Komponente mit v-if

Question

Ich habe eine Website und bei der Anmeldung habe ich localStorage den Benutzernamen aus dem Login gesetzt. Das ist also auf Login.Vue

login() { 
    axios.post('/login', this.user) 
    .then((response) => { 
    alertify.set('notifier','delay', 3); 
    alertify.success("Success! You are now logged in."); 

    axios.get("/user", this.user) 
    .then((response) => { 
     this.$router.push('/home'); 
     AuthPlugin.setUser(this.user.username); 
    }) 
    }) 
    .catch(function (error) { 
    alertify.set('notifier','delay', 0); 
    alertify.error('Invalid User'); 
    }); 
} 

ich das von mir eine AuthPlugin verwenden, das dies tut:

setUser(user) { 
    localStorage.setItem('authUser', user); 
} 

Auf Header.vue, die Komponente, die auf jeder Seite ist, ich habe die Benutzername erscheint auf jeder Seite und sagt, dass er online ist.

<template> 
    <div id="header-bar" v-if="!username"> 
     <nav class="navbar navbar-toggleable-md navbar-light bg-faded p-0 fixed-top"> 
     <a href="#">Your are online {{username}}</a> 
     <a href="#" @click="logout">Log out</a> 
     </nav> 
    </div> 
</template> 
<script> 
    import AuthPlugin from '../../plugin/Auth.js'; 
    import axios from 'axios'; 
    export default { 
     data() { 
      return { 
       users: {}, 
       username: localStorage.authUser 
      } 
     }, 
     methods: { 
      logout() { 
      AuthPlugin.destroyToken(); 
       AuthPlugin.destroyUser(); 
       this.$router.push('/'); 
      }, 
      getUsers() { 
       axios.get("/user") 
        .then((response) => { 
         this.users = response; 
        }) 
      } 
     } 
    } 
</script> 

Hier beim Abmelden zerstören ich das Token und Benutzer in AuthPlugin

destroyToken() { 
    localStorage.removeItem('token'); 
    localStorage.removeItem('authTokenExpiration'); 
}, 
destroyUser() { 
    localStorage.removeItem('authUser'); 
} 

ich den Header comp auf App.vue auf jeder Seite zu setzen.

<template> 
    <div> 
     <app-header></app-header> 
     <router-view></router-view> 
    </div> 
</template> 

Also wenn ich abmelden, entferne ich authUser von localStorage. Ich will, wenn ich auf Abmelden klicke und auf "/" umgeleitet werde, was Login-Komponente ist, diese Header versteckt werden soll.

Dies sind die Routen

export const routes = [ 
    {path: '/', component: Login}, 
    {path: '/home', component: Home, meta: {requiresAuth: true}}, 
    {path: '/events', component: Events, meta: {requiresAuth: true}}, 
    {path: '/events/new-event', component: NewEvent, meta: {requiresAuth: true}}, 
    {path: '/events/edit-event/:id', component: EditEvent, meta: {requiresAuth: true}} 
] 

Gerade jetzt, wenn ich beim Abmelden klicken, wenn ich weitergeleitet den Header einzuloggen ist weg, aber wenn ich den Benutzernamen eingeben und übergeben Sie auf der Website anmelden und geben Sie die Header ist immer noch versteckt.

Warum ist der Header versteckt? Wenn ich die Browser-Konsole localStore.authUser eintippe und die Eingabetaste drücke, sehe ich den Benutzernamen, mit dem ich mich angemeldet habe.

Bitte jemand sagen, was ich falsch gemacht habe in diesem v-if? Oder bitte sagen Sie mir, ob ich diesen Header beim Abmelden mit einer Diff-Methode ausblenden kann.

Answer 1

Ihre Header Komponente überwacht ihre eigeneusername Eigenschaft für Änderungen. Wenn Sie die Komponente instanziieren, wird der Wert einmal von localStorage kopiert.

Mein Vorschlag ist, den Benutzernamen (und optional den Benutzer) eine Eigenschaft Ihres Root-Vue-Objekts und aktualisieren Sie es in Ihrer setUser-Funktion. Sie können dann entweder den Nutzernamen als Requisite an die Komponente Header übergeben oder vm.$watch verwenden, um die username der Komponente zu aktualisieren, wenn sich der Benutzername der Vue-Instanz ändert.

Answer 2

Mögliche Arbeit um:

<div id="header-bar" v-if="!username && !$route.path === '/'"> 

Answer 3

Sie tun können, eine Sache setzen v-wenn-Check in App.vue:

<template> 
    <div> 
     <app-header v-if="!username"></app-header> 
     <router-view></router-view> 
    </div> 
</template> 

Und Daten:

data() { 
     return { 
     username: localStorage.authUser 
     } 

},

Dies wird den Header direkt binden.