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

这篇具有很好参考价值的文章主要介绍了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中的是一个字符串,大体是下面这个样子

vue3+pinia用户信息持久缓存(token)的问题,web开发,缓存,状态模式,vue.js

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

总之,过程相当繁琐,希望不要再写第5篇了。文章来源地址https://www.toymoban.com/news/detail-539621.html

到了这里,关于vue3+pinia用户信息持久缓存(token)的问题的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • uni_app+vite+vue3+ts开发小程序,解决getUserProfile()获取用户信息问题

    最近开发小程序,开发环境uni_app+vue3等。在获取小程序平台用户信息是报错: {errMsg: \\\"getUserProfile:fail must be invoked by user tap gesture\\\", errNo: 21500} 我在抖音上查了下错误码: 看到这个解释也是瞬间无语了,然后在平台查找错误,找了半天终于在vue2 升级vue3文档里面找到解决办法

    2024年02月04日
    浏览(76)
  • WEB安全(十二)token的续签问题-即动态刷新token,避免用户经常重新登录

    token有效期一般都设置得很短,那么token过期后如何动态刷新token,避免用户经常重新登录呢? 来看个具体需求: 超过2个小时后,用户没有请求,则需要重新登录。 这个需求一般有两种实现方式。 方式一 每次请求都返回新 token 假设一个 token 的签发时间为 12:00,需求为 2h 未

    2023年04月24日
    浏览(73)
  • vue3 一个基于pinia简单易懂的系统权限管理实现方案,vue-router动态路由异步问题解决

    作为项目经验稀少的vue开发者来说,在关键技术点上的经验不多,我希望通过我的思想和实践,把好的东西分享在这里,目的是进一步促进技术交流。项目即将完成,权限是最后的收尾工作,好的权限实现方案,可以让我们没有后顾之忧,也可以提升项目的运行速度。 在开发

    2023年04月08日
    浏览(57)
  • 【Vue】pinia 数据持久化插件 pinia-plugin-persistedstate 使用

    刷新浏览器后,重新加载页面时会重新初始化 vue、 pinia,而 pinia 中状态的值仅在内存中存在,而刷新导致浏览器存储中的数据就没了。 在实际开发中,浏览器刷新时,有些数据希望是保存下来的。如用户登录后,用户信息会存储在全局状态中,如果不持久化状态,那么每次

    2024年02月07日
    浏览(44)
  • vue3 路由缓存问题

    目录 解决问题的思路: 解决问题的方案: 1、给roter-view添加key(破坏复用机制,强制销毁重建) 2、使用beforeRouteUpdate导航钩子 3、使用watch监听路由 vue3路由缓存:当用户从/users/johnny导航到/users/jolyne时,相同的组件实例被重复使用。由于两个路由都渲染相同的组件,比起销

    2024年02月12日
    浏览(37)
  • Vue3---什么是路由缓存问题

    使用带有参数的路由时需要注意的是,当用户从 /users/johnny 导航到 /users/jolyne 时,相同的组件实例将被重复使用。因为两个路由都渲染同个组件,比起销毁再创建,复用则显得更加高效。不过,这也意味着组件的生命周期钩子不会被调用。 问题 :一级分类的切换正好满足上

    2024年02月15日
    浏览(39)
  • vue3+antd——实现App.vue页面实时获取权限+用户信息的功能——基础积累

    之前写过一篇文章关于vue3+antd的框架模板,链接如下:http://t.csdn.cn/9dZMS 下面针对 App.vue 页面实时获取权限+用户信息的功能做一下记录 重要的代码如下: 通过 computed 计算属性进行用户信息的实时监听,用户信息更改时也会重新触发user参数的变化,最终导致user内容保持为最

    2024年02月14日
    浏览(38)
  • vue3中的pinia

    pinia官网 main.ts中引入 创建store文件夹,创建index.ts App.vue中引入 store  是一个用 reactive  包裹的对象,这意味着不需要在getter 之后写 .value ,但是,就像 setup  中的 props  一样, 我们不能对其进行解构 为了从 Store 中提取属性同时保持其响应式,您需要使用 storeToRefs() 。 它将

    2024年02月10日
    浏览(38)
  • Vue3中使用pinia

    目录 1、安装:npm install pinia 2、创建store文件并配置内部的index.js文件 3、main.js文件中配置 4、组件使用 4-1、 store.$reset()    4-2 store.$patch  5.订阅修改 6.Getter 7、Actions 效果图  点击按钮,界面变化  说明成功修改了pinia里面的数据,且界面刷新证明这种直接修该pinia数据的方式

    2024年02月07日
    浏览(42)
  • vue3组件通信之pinia

      在vue3,vue的状态管理也迎来了新的变更,在vue3使用新的组件pinia来代理原有的vuex。pinia相比vuex,功能收敛了不少,比如不直接暴露setter方式,外部直接修改数据 vuex:集中式管理状态容器,可以实现任意组件之间通信 核心概念:state、mutations、actions、getters、modules pinia:集中式

    2024年02月11日
    浏览(41)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包