vue3+pinia用户信息持久缓存(token)的问题

vue3+pinia用户信息持久缓存(token)的问题

对博主来说,这是个相当复杂的问题。

当初在使用vue2+vuex进行用户信息持久登录时,写了不下3篇博客,确实是解决了问题,博客链接如下

  • vue存储和使用后端传递过来的token
  • vue中对token的有效期的理解
  • vuex刷新页面丢失登录的token信息的解决方案

第一篇博客是记录前端如何使用token,简言之,就是先把后端传过来的token写入到浏览器的localstorage缓存中,前端在处理路由之前,先检查localstorage中有没有token,有token就放行,没有token就跳转到登录界面

第二篇博客是发现token过期后的处理方式,最后我的vue2项目都没有使用这篇博客中的解决方案,而是使用了第三篇博客的解决方案

第三篇博客出现的问题是,**每次刷新页面,store里面的数据没了,而localstorage中还有数据,**这样的话,页面上有些地方需要store的数据就加载不出来了,但token并没有更新,出现了逻辑错误。解决方案就是每次在启动页面的时候,检查一下localstorage中有没有数据,有数据的话,重新设置一下store,当然,在路由守卫环节也添加了路由的放行规则

我把第三种方案当做终极解决方案,确实很长一段时间都没有再受到困扰

知道我现在开始使用vue3+pinia来写前端项目,问题又来了

pinia和vuex遇到的问题是一样的,我尝试用第三篇博客来解决,按道理应该是可以解决的,但实际上一直没能解决。折腾很长一段时间,找到了一种比较折中的解决方案

pinia-plugin-persistedstate持久化存储数据

实际上就是使用这个pinia-plugin-persistedstate插件,它解决的问题是,帮你把store中的数据持久化的存储在localstorage中,并且比较好的一点是,当你需要使用store中的数据时,它又从localstorage中取出来给你去渲染页面,其实就和我上面第3篇博客的内容差不多,这样就不怕刷新页面了,先来看看怎么写和怎么中

store文件的写法

直接看代码:

import { ref } from "vue";
import { defineStore } from "pinia";
import { loginAPI } from "@/apis/user";export const useUserStore = defineStore("user",() => {const userInfo = ref({});const getUserInfo = async (data) => {const res = await loginAPI(data);// console.log(res);userInfo.value = res;// console.log(userInfo.value)};//   解决刷新页面丢失store信息的问题const clearUserInfo = () => {userInfo.value = {};localStorage.removeItem('user')};return {userInfo,getUserInfo,clearUserInfo,};},{persist: true,}
);

pinia用的组合式api写法

  • userInfo是用户信息
  • getUserInfo是通过调用登录接口,修改userInfo
  • clearUserInfo是清除用户信息

在代码的最后面,加了个对象persist: true,之后每次登录,就会在localstorage中生成一个key为user的字符串对象,刷新页面而这个对象不会消失,模板上需要渲染的时候,又把内容添加给store,相对来说比较靠谱。命名规则就是definstore时定义的变量名。

在我没有添加路由守卫规则之前,这么写的话,会有个问题,退出登录后,还能返回到原来的路由,只是页面上该有的用户信息都没有了,因为clearUserInfo并没有删除localstorage中的user对象,user一直都在,那按照之前的逻辑,当然行不通了

退出登录时的操作

看看具体怎么解决吧

//这是退出登录用到的方法
const logout = () => {// userStore.clearUserInfo()localStorage.removeItem('user')    router.push('/login')
}

其实就是清除localstorage中的user对象

路由守卫

路由守卫是最麻烦的地方,逻辑理不清楚,就没法正常跳转

我的写法

// 路由守卫
import jwt_decode from "jwt-decode";
router.beforeEach((to, from, next) => {const isLogin = localStorage.user ? true : false;if (isLogin) {const user = JSON.parse(localStorage.user)const decode = jwt_decode(user.userInfo.token);const date = parseInt(new Date().getTime() / 1000);if (date - decode.iat > decode.exp - decode.iat) {localStorage.removeItem("user");next("/login");}}if (to.path == "/login") {next();} else {isLogin ? next() : next("/login");}
});

还是根据localstorage中是否有user对象来判断是否登录,但是前面说过了,它存在localstorage中的是一个字符串,大体是下面这个样子

image-20230706141113934

可以看出来,里面有你定义的state数据,所以,需要解析先成json才能正常取值,取值后,就是解析其中的token了,解析完token,就可以判断有没有过期来清除token了

总之,过程相当繁琐,希望不要再写第5篇了。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.hqwc.cn/news/14564.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

抖音短视频矩阵管理系统源码开发部署(开源定制)

一、什么是短视频矩阵管理系统? 短视频矩阵管理系统是专门为企业号商家、普通号商家提供帐号运营从流量 到转化成交的一站式服务方案,具体包含:点赞关注评论主动私信 ,评论区回复,自动潜客户挖掘,矩阵号营销…

Maven高级(四)--私服

一.作用 我们所拆分的模块是可以在同一个公司各个项目组之间的项目组之间进行资源共享的,这就需要Maven的私服来实现。 二.场景 两个项目组之间如何基于私服进行资源的共享的呢? 例如A开发了一个模块tlias-utils,B团队进行项目开发,要想使用…

身高排队,不是你想的那么简单——力扣“按身高排序”题解分析

本篇博客会讲解力扣“2418. 按身高排序”的解题思路,这是题目链接。 想要排序身高数组是非常简单的。我们在对身高数组进行排序时,会进行一些操作,比如交换2个元素等等。本题中,相当于我们要“记住”排序身高数组中进行了哪些操作…

2023校招,2024校招,社招Shein,大量HC,使用内推码直达,流程快速

广州,深圳,南京,大量开发岗位,包含Java开发岗,前端开发岗大数据开发岗位,产品岗位,测试岗位等等,大量hc,欢迎大家投递Shein,打造全球化的快时尚跨境电商品牌

【计算机视觉 | 图像分割】arxiv 计算机视觉关于图像分割的学术速递(7 月 4 日论文合集)

文章目录 一、分割|语义相关(18篇)1.1 TomatoDIFF: On-plant Tomato Segmentation with Denoising Diffusion Models1.2 CGAM: Click-Guided Attention Module for Interactive Pathology Image Segmentation via Backpropagating Refinement1.3 RefSAM: Efficiently Adapting …

Pico版节奏光剑简单制作

视频教程参考:Pico VR Neo3开发实战教程(1)——节奏光剑,舞台灯效_哔哩哔哩_bilibili 1、新建项目和pico配置 插件导入 找到下载的pico SDK 选择json文件,点击即可导入 启用插件 在 Project Settings 窗口中&#xf…

Spring AOP讲解及实例

Aop面向切面编程 文章目录 Aop面向切面编程什么是AOPAOP术语Spring AOP 的使用导入依赖编写切面类切面定义语法小细节输出日志成功 什么是AOP AOP:(Aspect Oriented Programming)面向切面编程,和OOP(Object Oriented …

Vue3 网络请求——axios 高级用法之 axios 拦截器实战与并发请求

文章目录 📋前言🎯关于拦截器🎯项目创建🎯代码分析🎯补充:并发请求🧩axios.all() 和 Promise.all() 的区别 📝最后 📋前言 Axios 是一个流行的基于 Promise 的 HTTP 客户…

设计模式3:单例模式:静态内部类模式是怎么保证单例且线程安全的?

上篇文章:设计模式3:单例模式:静态内部类单例模式简单测试了静态内部类单例模式,确实只生成了一个实例。我们继续深入理解。 静态变量什么时候被初始化? public class Manager {private static class ManagerHolder …

【SQL应知应会】行列转换(三)• Oracle版

欢迎来到爱书不爱输的程序猿的博客, 本博客致力于知识分享,与更多的人进行学习交流 本文收录于SQL应知应会专栏,本专栏主要用于记录对于数据库的一些学习,有基础也有进阶,有MySQL也有Oracle 行列转换 • Oracle版 oracle的行列转换前言1.数据…

免费开源 | 基于SpringBoot的博客系统

介绍 基于springboot后端架构,websocket实现私信,前端采用thymeleafbootstraplayuiRedis 注册使用邮箱验证注册,且验证码存在redis中,所以需要有redis环境 软件架构 springbootwebsocketthymeleafbootstraplayuiRedismysql 8.…

vue项目业务实现,视频监控-文件流,大屏适配方案(v-scale-screen),websocket前端

最近把以前的业务场景及解决方案整理了一下,具体实现的工具如下: 监控-视频文件流>video.js videojs-contrib-hls 大屏适配方案> v-scale-screen websocket>sockjs-client webstomp-client 视频监控-文件流 使用方法 下载video插件&#xf…