как обновить навигационные ссылки после входа в систему vuejs

Question

Я создаю систему аутентификации, используя Laravel и Vue. js, и я сохранил токен API в localStorage. Но когда пользователь входит в приложение, ссылки заголовка остаются «Вход» и «Регистрация». Я хочу обновить эти ссылки после входа в систему. Мой код

<b-navbar-nav class="ml-auto" v-if="this.$store.state.user === null">
    <li class="nav-item"><router-link class="nav-link text-white" to="/signin">SignIn</router-link></li>
    <li class="nav-item"><router-link class="nav-link" to="/signup">SignUp</router-link></li>
</b-navbar-nav>
<b-navbar-nav class="ml-auto" v-else>
    <b-button class="btn-sm btn-success" v-on:click="getBucket()">Create Bucket</b-button>
    <b-button class="btn-sm btn-info ml-1" v-on:click="logout()">Logout</b-button>
</b-navbar-nav>

, а индексный файл моего магазина -

export default new Vuex.Store({
   state: {
      user: localStorage.getItem('userToken')
   },
   mutations: {
   },
   actions: {
   },
   modules: {
   }
 })

Answer 1

Если у вас есть действие Vuex для входа в систему, вы можете использовать что-то вроде этого:

actions: {
  async login({ commit }, credentials) {
    const response = await axios.post(...); // use `credentials` to log in
    const token = response.data;
    commit('SET_TOKEN', token);
  }
},
mutations: {
  SET_TOKEN(state, token) {
    localStorage.setItem('userToken', token);  // <-- set the token in storage
    state.user = token; // <-- also set the token in state
  }
}

Во время входа в систему вы устанавливаете токен в хранилище, а также устанавливаете токен на state.user .