Реактивный навигационный компонент в Vue

Question

Я пытаюсь создать простую реактивную навигацию, основанную на том, аутентифицирован ли пользователь или нет. Метод login в представлении входа устанавливает токен в localstorage. Если установлено, я хочу отобразить кнопку выхода из системы. Я пытался вычислить, стандартные методы и реквизиты безрезультатно.

При входе в систему навигация не обновляется. ОДНАКО, если я обновляю страницу (повторно инициализирую приложение), она показывает кнопку выхода из системы.

Что именно я делаю неправильно?

Я часами пытался понять концепцию Vue JS и вот-вот уйду. То, что заняло бы у меня несколько минут, чтобы сделать серверную часть, заняло у меня много часов со стороны клиента. ГДЕ РЕАКТИВНОСТЬ?

Nav.vue

  <template>
    <nav class="navbar navbar-expand-lg navbar-dark bg-primary">
      <a class="navbar-brand" href="#">App</a>
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarColor01" aria-controls="navbarColor01" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="navbarColor01">
        <ul class="navbar-nav">
          <li class="nav-item active">
            <a class="nav-link" href="#">
              <router-link to="/">Home</router-link>
              <span class="sr-only">(current)</span>
            </a>
          </li>
          <li class="nav-item">
              <router-link to="/about" class="nav-link">About</router-link>
          </li>
        </ul>
        <ul class="navbar-nav ml-auto">
          <li class="nav-item" v-if="hasAuth()"><a @click="logout()" class="nav-link">Log Out</a></li>
          <template v-else> 
            <li class="nav-item">
              <router-link to="/register" class="nav-link">Register</router-link>
            </li>
            <li class="nav-item">
              <router-link to="/login" class="nav-link">Login</router-link>
            </li>
          </template>
        </ul>
      </div>
    </nav>
  </template>

  <script>
  export default {
    name: 'Nav',
    data: () => {
      return {
        auth: false
      }
    },
    methods: {
      logout: function () {
        localStorage.removeItem('user-token');
        this.$router.push({ path: 'login' });
      },
      hasAuth: function () {
        this.auth = (localStorage.getItem('user-token')) ? true : false;
        return this.auth
      }
    },
  };
  </script>

App.vue

<template>
  <div id="app">
    <Nav></Nav>
    <router-view/>
  </div>
</template>

<script>
import Nav from '@/components/Nav.vue';

export default {
  components: {
    Nav,
  },
}
</script>

Answer 1

Пока Vue.js реагирует, localStorage нет. Vue не может знать, изменен localStorage или нет. Нет локального события изменения, доступного с локальным хранилищем.

Чтобы решить эту проблему, используйте Vuex в сочетании с локальным хранилищем для постоянных данных. Точка, в которой вы сохраняете токен в локальном хранилище, также сохраняет копию в Vuex хранилище.

Другой компонент, такой как Nav, должен считывать данные из хранилища Vuex, которое является реактивным. Когда вы обновите страницу, инициализируйте хранилище Vuex с данными из localStorage.

Таким образом, вы получаете идеальную реактивную систему.