refactor: simplify wrapper storage

src/store/modules/tags/helpers.js

@@ -1,7 +1,6 @@
-import { createSessionStorage } from '@/utils/cache'
+import { sStorage } from '@/utils/cache'
 
-export const tagsSS = createSessionStorage({ prefixKey: 'tag_' })
-export const activeTag = tagsSS.get('activeTag')
-export const tags = tagsSS.get('tags')
+export const activeTag = sStorage.get('activeTag')
+export const tags = sStorage.get('tags')
 
 export const WITHOUT_TAG_PATHS = ['/404', '/login', '/redirect']

src/store/modules/tags/index.js

@@ -1,6 +1,7 @@
 import { defineStore } from 'pinia'
-import { tagsSS, activeTag, tags, WITHOUT_TAG_PATHS } from './helpers'
+import { activeTag, tags, WITHOUT_TAG_PATHS } from './helpers'
 import { router } from '@/router'
+import { sStorage } from '@/utils/cache'
 
 export const useTagsStore = defineStore('tag', {
   state() {
@@ -12,11 +13,11 @@ export const useTagsStore = defineStore('tag', {
   actions: {
     setActiveTag(path) {
       this.activeTag = path
-      tagsSS.set('activeTag', path)
+      sStorage.set('activeTag', path)
     },
     setTags(tags) {
       this.tags = tags
-      tagsSS.set('tags', tags)
+      sStorage.set('tags', tags)
     },
     addTag(tag = {}) {
       this.setActiveTag(tag.path)

src/utils/cache/index.js

@@ -1,15 +1,21 @@
-import { createWebStorage } from './web-storage'
+import { createStorage } from './storage'
+
+const prefixKey = 'Vue_Naive_Admin_'
 
 export const createLocalStorage = function (option = {}) {
-  return createWebStorage({
+  return createStorage({
     prefixKey: option.prefixKey || '',
     storage: localStorage,
   })
 }
 
 export const createSessionStorage = function (option = {}) {
-  return createWebStorage({
+  return createStorage({
     prefixKey: option.prefixKey || '',
     storage: sessionStorage,
   })
 }
+
+export const lStorage = createLocalStorage({ prefixKey })
+
+export const sStorage = createSessionStorage({ prefixKey })

src/utils/cache/storage.js

@@ -1,6 +1,6 @@
 import { isNullOrUndef } from '@/utils/is'
 
-class WebStorage {
+class Storage {
   constructor(option) {
     this.storage = option.storage
     this.prefixKey = option.prefixKey
@@ -50,6 +50,6 @@ class WebStorage {
   }
 }
 
-export function createWebStorage({ prefixKey = '', storage = sessionStorage }) {
-  return new WebStorage({ prefixKey, storage })
+export function createStorage({ prefixKey = '', storage = sessionStorage }) {
+  return new Storage({ prefixKey, storage })
 }

src/utils/token.js

@@ -1,25 +1,23 @@
-import { createLocalStorage } from './cache'
+import { lStorage } from './cache'
 import { refreshToken } from '@/api/auth'
 
 const TOKEN_CODE = 'access_token'
 const DURATION = 6 * 60 * 60
 
-export const lsToken = createLocalStorage()
-
 export function getToken() {
-  return lsToken.get(TOKEN_CODE)
+  return lStorage.get(TOKEN_CODE)
 }
 
 export function setToken(token) {
-  lsToken.set(TOKEN_CODE, token, DURATION)
+  lStorage.set(TOKEN_CODE, token, DURATION)
 }
 
 export function removeToken() {
-  lsToken.remove(TOKEN_CODE)
+  lStorage.remove(TOKEN_CODE)
 }
 
 export async function refreshAccessToken() {
-  const tokenItem = lsToken.getItem(TOKEN_CODE)
+  const tokenItem = lStorage.getItem(TOKEN_CODE)
   if (!tokenItem) {
     return
   }

src/views/login/index.vue

@@ -41,7 +41,7 @@
 
 <script setup>
 import { login } from '@/api/auth'
-import { createLocalStorage } from '@/utils/cache'
+import { lStorage } from '@/utils/cache'
 import { setToken } from '@/utils/token'
 
 const title = import.meta.env.VITE_APP_TITLE
@@ -54,11 +54,10 @@ const loginInfo = ref({
   password: '123456',
 })
 
-const ls = createLocalStorage({ prefixKey: 'login_' })
-const lsLoginInfo = ls.get('loginInfo')
-if (lsLoginInfo) {
-  loginInfo.value.name = lsLoginInfo.name || ''
-  loginInfo.value.password = lsLoginInfo.password || ''
+const localLoginInfo = lStorage.get('loginInfo')
+if (localLoginInfo) {
+  loginInfo.value.name = localLoginInfo.name || ''
+  loginInfo.value.password = localLoginInfo.password || ''
 }
 
 async function handleLogin() {
@@ -72,7 +71,7 @@ async function handleLogin() {
     const res = await login({ name, password: password.toString() })
     if (res.code === 0) {
       $message.success('登录成功')
-      ls.set('loginInfo', { name, password })
+      lStorage.set('loginInfo', { name, password })
       setToken(res.data.token)
 
       if (query.redirect) {