登錄vuejs后如何更新導航欄鏈接

Question

我正在使用 Laravel 和 Vue.js 創建一個身份驗證系統，並且我在 localStorage 中存儲了一個 api 令牌。 但是當用戶登錄應用程序時，header 鏈接仍然是“登錄”和“注冊”。 我想在登錄后更新這些鏈接。 我的代碼是

<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 。