Как внести изменения в панель навигации, когда пользователь вошел в систему?

Question

Я использую Laravel с vue и использую JWT auth для аутентификации.Я создал панель навигации и хочу изменить ссылки этой панели на другие, когда пользователь войдет в систему.Я храню токен jwt в локальном хранилище, но не могу заставить работать ссылки.Пожалуйста, помогите, поскольку я новичок в этих технологиях.

Я пытался реализовать его с Event Bus и смог изменить ссылки, но когда я нажимаю кнопку выхода из системы, она не удаляет токен элемент из локальное хранилище и не вызывает функцию также.Я предполагаю, что есть некоторая проблема с логикой кода, но я не могу понять это.

Панель навигации

    <nav class="main_nav">
          <input type="checkbox" id="nav_check" class="hidden">
          <label for="nav_check" class="nav-btn">
            <i></i>
          </label>
          <div class="logo">
            <a href="#">SCRIPTICO</a>
          </div>
          <div class="nav-wrapper">
            <ul>
              <li v-if="auth == ''">
                <router-link to="/login">Sign in</router-link>
              </li>
              <li v-if="auth ==''">
                <router-link to="/register">Register</router-link>
              </li>
              <li v-if="auth !==''">
                <router-link to="/userdetails">Dashboard</router-link>
              </li>
              <li v-if="auth !==''">
                <router-link to="/" v-on:click="handleLogout()">Logout</router-link>
              </li>
            </ul>
          </div>
        </nav>

Это то, что я пробовал

<script>
import EventBus from './EventBus'
export default {
    data(){
      return{
        auth: '',
        user: ''
      }
    },

    methods:{
        handleLogout() {
        console.log('this is it')
      window.localStorage.removeItem("usertoken");
      this.$router.push({ path: "/" });
    }
    },
    mounted(){
      EventBus.$on('logged-in', status => {
        this.auth = status
        console.log(status)
      })
    }
}
</script>

Событиефайл шины vue

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

то, что я ожидаю от этого поведения, - это когда пользователь, не вошедший в систему, в панели навигации должен показывать ссылки для регистрации и входа в систему, а когда пользователь вошел в систему, ссылки должны измениться на выход из системы.только.

Answer 1

Ваш метод не работает, потому что вы даете событие click для

<router-link

, пытаясь присвоить это событие некоторым <button> или <a>

какниже

<a href="javascript:void(0);" v-on:click='handleLogout()'>Logout<a> или какая-то кнопка

<button v-on:click="handleLogout()">Logout<button>

Надеюсь, это поможет