vue.js - Feathers vuex：刷新后用户不再登录

Question

我是羽毛和 vue js 的新手我不明白这一点，当我登录用户时，v-if 指令在导航栏上工作，但是当我刷新页面时，我注意到用户不再登录仍然是 JWT存储在本地存储中。

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 ，但更轻松的解决方案是将您的用户属性设置为商店的状态，如下所示

user: sessionStorage.getItem(yourkey) ?? null