vue.js - Feathers vuex:刷新后用户不再登录
问题描述
我是羽毛和 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>
解决方案
您只需要一些逻辑来在刷新时获取您的令牌。您首先需要将其保存在某个地方,比如 sessionStorage。
您可以使用您提到的 vuex-persistedstate ,但更轻松的解决方案是将您的用户属性设置为商店的状态,如下所示
user: sessionStorage.getItem(yourkey) ?? null
推荐阅读
- java - 如何将输入值转换为 Unicode 并打印出来?
- ssl - Kubernetes Liveness 和 readiness 探测导致错误日志“http:来自 10.234.0.1:49330 的 TLS 握手错误:EOF”
- python - 使用 matplotlib 向 hist2d 添加对角线
- javascript - 如何将数组内的对象转换为嵌套数组 JavaScript?
- java - 使用java解析带有数组的Json数据
- ruby-on-rails -
- office365 - 使用 Office 365 服务通信 API 提供服务事件消息需要多长时间
- android - GPU透支的单位是什么?
- javascript - 如何在 Node.js 的对象数组中创建函数编辑对象
- python - pygame.QUIT初始化时如何开始倒计时