羽毛vuex：刷新后用户不再登录

Question

我是羽毛和Vue JS的新手，我不明白这一点，当我登录用户时，v-if指令可在导航栏上运行，但是当我刷新页面时，我注意到用户不再登录仍JWT存储在localStorage中。

App-Navbar.vue

<template>
  <div>
    <q-header bordered class="bg-white">
      <q-toolbar>
        <div class="q-gutter-sm" v-if="!user">

          <q-btn to="/login" />
          <q-btn to="/signup" />

        </div>
        <div class="q-gutter-sm" v-if="user">

          <q-btn @click="logout"/>
        </div>

      </q-toolbar>
    </q-header>
  </div>
</template>

<script>
import { mapActions, mapState } from "vuex";

export default {

methods: {
    ...mapActions("auth", { authLogout: "logout" }),
    logout() {
      this.authLogout().then(() => this.$router.push("/login"));
    }
  },
  computed: {
    ...mapState("auth", { user: "payload" })
  }
};
</script>

Answer 1

您只需要一些逻辑就可以在刷新时获取令牌。您首先需要将其保存在某个地方，例如sessionStorage。

您可以使用如上所述的vuex-persistedstate，但是更简单的解决方案是像这样在[[store的state中设置用户属性

user: sessionStorage.getItem(yourkey) ?? null