登錄時將登錄更改為注銷

Question

我正在按照教程進行導航欄更改，基於令牌是否存儲在本地存儲中

這是我的代碼：eventbus.js

   <script>
    import Vue from 'vue'
    const EventBus = new Vue()
    export default EventBus
    </script>

導航欄.vue

<template>
      <nav class="navbar navbar-expand-lg navbar-dark bg-dark rounded">
        <button class="navbar-toggler" 
        type="button" 
        data-toggle="collapse" 
        data-target="#navbar1" 
        aria-controls="navbar1"
        aria-expanded="false" 
        aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>

        <div class="collapse navbar-collapse justify-content-md-center" id="navbar1">
          <ul class="navbar-nav">
            <li class="nav-item">
              <router-link class="nav-link" to="/">Home</router-link>
            </li>

            <li v-if="auth==''" class="nav-item">
              <router-link class="nav-link" to="/login">Login</router-link>
            </li>
            <li v-if="auth==''" class="nav-item">
              <router-link class="nav-link" to="/register">Register</router-link>
            </li>
            <li v-if="auth=='loggedin'" class="nav-item">
              <router-link class="nav-link" to="/profile">Profile</router-link>
            </li>
            <li v-if="auth=='loggedin'" class="nav-item">
              <a class="nav-link" href="" v-on:click="logout">Logout</a>
            </li>
          </ul>
        </div>
      </nav>
    </template>

<script>
import EventBus from './EventBus'
EventBus.$on('logged-in', test => {
  console.log(test)
})
export default {
  data () {
    return {
      auth: '',
      user: ''
    }
  },
  methods: {
    logout () {
      localStorage.removeItem('usertoken')
    }
  },
  mounted () {
    EventBus.$on('logged-in', status => {
      this.auth = status
    })
  }
}
</script>

登錄.vue

<template>
    <div class="login-page">
  <div class="form">
      <form @submit.prevent="login">
        <input type="text" name="username" v-model="username" placeholder="Username" />
        <input type="password" name="password" v-model="password" placeholder="Password" />
        <input type="submit" value="LOG IN">

      </form>
  </div>
</div>
</template>
<script>
import axios from 'axios'
import router from '../router/index'
import EventBus from '../components/EventBus'
import VueCookies from 'vue-cookies'
export default {
  data () {
    return {
      username: '',
      password: ''
    }
  },
  methods: {
    login () {
      axios.post('http://localhost:3001/login',
        {
          username: this.username,
          password: this.password
        }
      ).then((res) => {
          console.log(res.data.token)
if(res.data.status===false){
  router.push({ name: 'login' })
} else{
     localStorage.setItem('usertoken', res.data.token)
        this.username = ''
        this.password = ''
      router.push({ name: 'showgames'})
   }

      }).catch((err) => {
        console.log(err)
      })
      this.emitMethod()
    },
    emitMethod () {
      EventBus.$emit('logged-in', 'loggedin')
    }
  }
}
</script>

我想知道為什么導航欄沒有改變，謝謝你的幫助

Answer 1

this.emitMethod()語句應該在 .then( .then(...)的主體內，而你的在外面。

在navbar.vue中使用 beforeDestroy beforeDestroy()鈎子來刪除事件處理程序也是一個好習慣，否則您將在多個組件安裝上擁有處理程序的多個實例（這在開發過程中很常見）。