羽毛 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

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

你可以使用 vuex-persistedstate，如你所提到的，但一个更轻量级的解决方案只是在存储的状态中设置你的用户属性，就像这样

user: sessionStorage.getItem(yourkey) ?? null