pinia持久化和数据加密处理

引言

vue3现在比较常用的状态管理是pinia,和vuex一样,我们在某些场合下也需要对状态持久化。本文将讨论这个话题。

持久化的实现

要实现pinia的持久化,我们肯定要像vuex一样引入一个插件,这个插件就是pinia-plugin-persistedstate,官方文档在此

你可以直接通过以下其中一个命令安装

csharp 复制代码
npm i pinia-plugin-persistedstate -S
yarn add pinia-plugin-persistedstate
pnpm add pinia-plugin-persistedstate -S

并将该插件添加到你的pinia

javascript 复制代码
import { createPinia } from 'pinia'
import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'
​
const pinia = createPinia()
pinia.use(piniaPluginPersistedstate)

插件的基本使用

参考官方文档,你可以直接在需要持久化的store中的state配置后设置persist:true

此外,persist还可以是一个对象,它接收如下的参数:

具体用法实例参考文档或注释说明。

特别需要说明的,如果只需要局部字段的持久化,我们可以使用配置中的paths属性来实现。例如

css 复制代码
state:()=>({
    username:'admin',
    nickname:"管理员",
    token:"",
    role:"admin"
})

我们只需要对username和nickname持久化,其它字段不需要,我们可以通过

css 复制代码
persist:{
    paths:['username','nickname']
}

paths中还支持字段路径配置,如文档所示的save.me

css 复制代码
import { defineStore } from 'pinia'
​
export const useStore = defineStore('store', {
  state: () => ({
    save: {
      me: 'saved',
      notMe: 'not-saved',
    },
    saveMeToo: 'saved',
  }),
  persist: {
    paths: ['save.me', 'saveMeToo'],
  },
})

持久化数据加密处理

数据持久化之后我们还得考虑数据是否要加密,就像上文的role字段很明显是用于用户角色控制的,不加密处理就可以通过F12修改,功能就白做了。为此,引入了secure-ls

其可以指定对我们存入LocalStorage的字段选择合适的加密算法(通过配置中的encodingType指定)将存入LocalStorage的数据加密。

配合pinia-plugin-persistedstate使用的话,我们可以先定义一个"类Storage"。

typescript 复制代码
import type { StorageLike } from 'pinia-plugin-persistedstate'
import SecureLS from 'secure-ls'
const ls = new SecureLS({
  isCompression: false, //不压缩
  //自定义秘钥
  encryptionSecret: 'ddddgxxx'
})
​
export const SelfStorage: StorageLike = {
  setItem(key: string, value: string) {
    ls.set(key, value)
  },
  getItem(key: string): string | null {
    return ls.get(key)
  }
}

之所以可以这样,其实也是pinia-plugin-persistedstate的配置项中的storage?: StorageLike;storage的类型是StorageLike,其类型定义如下:

ini 复制代码
type StorageLike = Pick<Storage, 'getItem' | 'setItem'>;

由此,可以大概知道,pinia-plugin-persistedstate最终调用的是给定StoragesetItemgetItem方法,只要我们自定义的Storage实现了这两个方法,我们甚至可以把全局状态存储在cookie设置是webSql中!对于我们需要加密这个需求,secure-ls更方便一些,因此文中选择了它。

总结

我们要想对pinia的全局状态持久化,可以选择使用插件pinia-plugin-persistedstate;而要想对这些状态数据进一步加密处理,我们可以通过自定义Storage(类似于后端中的接口实现)来结合一些加密库,例如secure-ls来实现。

相关推荐
灵感__idea3 小时前
JavaScript高级程序设计(第5版):好的编程就是掌控感
前端·javascript·程序员
试图让你心动5 小时前
原生input添加删除图标类似vue里面移入显示删除[jquery]
前端·vue.js·jquery
_Kayo_5 小时前
VUE2 学习笔记6 vue数据监测原理
vue.js·笔记·学习
陈琦鹏6 小时前
轻松管理 WebSocket 连接!easy-websocket-client
前端·vue.js·websocket
hui函数6 小时前
掌握JavaScript函数封装与作用域
前端·javascript
Carlos_sam7 小时前
Opnelayers:ol-wind之Field 类属性和方法详解
前端·javascript
小毛驴8507 小时前
创建 Vue 项目的 4 种主流方式
前端·javascript·vue.js
你这个年龄怎么睡得着的9 小时前
Babel AST 魔法:Vite 插件如何让你的 try...catch 不再“裸奔”?
前端·javascript·vite
Dream耀9 小时前
提升React移动端开发效率:Vant组件库
前端·javascript·前端框架
NUC_Dodamce10 小时前
Cocos3x 解决同时勾选 适配屏幕宽度和 适配屏幕高度导致Widget组件失效的问题
开发语言·javascript·ecmascript