增加统一的cache缓存工具类,将游览器的store操作都集中在此,存储时添加统一的prefix, cookie增加path, 可防止同一域名部署多个前端服务时缓存冲突; 相应替换所有调用位置

src/services/user.js

@@ -22,9 +22,6 @@ export async function getRoutesConfig() {
  * 退出登录
  */
 export function logout() {
-  localStorage.removeItem(process.env.VUE_APP_ROUTES_KEY)
-  localStorage.removeItem(process.env.VUE_APP_PERMISSIONS_KEY)
-  localStorage.removeItem(process.env.VUE_APP_ROLES_KEY)
   removeAuthorization()
 }
 export default {

src/store/modules/account.js

@@ -1,3 +1,5 @@
+import {getLocalStorage, setLocalStorage} from '@/utils/cache'
+
 export default {
   namespaced: true,
   state: {
@@ -10,7 +12,7 @@ export default {
     user: state => {
       if (!state.user) {
         try {
-          const user = localStorage.getItem(process.env.VUE_APP_USER_KEY)
+          const user = getLocalStorage(process.env.VUE_APP_USER_KEY)
           state.user = JSON.parse(user)
         } catch (e) {
           console.error(e)
@@ -21,7 +23,7 @@ export default {
     permissions: state => {
       if (!state.permissions) {
         try {
-          const permissions = localStorage.getItem(process.env.VUE_APP_PERMISSIONS_KEY)
+          const permissions = getLocalStorage(process.env.VUE_APP_PERMISSIONS_KEY)
           state.permissions = JSON.parse(permissions)
           state.permissions = state.permissions ? state.permissions : []
         } catch (e) {
@@ -33,7 +35,7 @@ export default {
     roles: state => {
       if (!state.roles) {
         try {
-          const roles = localStorage.getItem(process.env.VUE_APP_ROLES_KEY)
+          const roles = getLocalStorage(process.env.VUE_APP_ROLES_KEY)
           state.roles = JSON.parse(roles)
           state.roles = state.roles ? state.roles : []
         } catch (e) {
@@ -45,7 +47,7 @@ export default {
     routesConfig: state => {
       if (!state.routesConfig) {
         try {
-          const routesConfig = localStorage.getItem(process.env.VUE_APP_ROUTES_KEY)
+          const routesConfig = getLocalStorage(process.env.VUE_APP_ROUTES_KEY)
           state.routesConfig = JSON.parse(routesConfig)
           state.routesConfig = state.routesConfig ? state.routesConfig : []
         } catch (e) {
@@ -58,19 +60,19 @@ export default {
   mutations: {
     setUser (state, user) {
       state.user = user
-      localStorage.setItem(process.env.VUE_APP_USER_KEY, JSON.stringify(user))
+      setLocalStorage(process.env.VUE_APP_USER_KEY, JSON.stringify(user))
     },
     setPermissions(state, permissions) {
       state.permissions = permissions
-      localStorage.setItem(process.env.VUE_APP_PERMISSIONS_KEY, JSON.stringify(permissions))
+      setLocalStorage(process.env.VUE_APP_PERMISSIONS_KEY, JSON.stringify(permissions))
     },
     setRoles(state, roles) {
       state.roles = roles
-      localStorage.setItem(process.env.VUE_APP_ROLES_KEY, JSON.stringify(roles))
+      setLocalStorage(process.env.VUE_APP_ROLES_KEY, JSON.stringify(roles))
     },
     setRoutesConfig(state, routesConfig) {
       state.routesConfig = routesConfig
-      localStorage.setItem(process.env.VUE_APP_ROUTES_KEY, JSON.stringify(routesConfig))
+      setLocalStorage(process.env.VUE_APP_ROUTES_KEY, JSON.stringify(routesConfig))
     }
   }
 }

src/utils/axios-interceptors.js

@@ -1,4 +1,4 @@
-import Cookie from 'js-cookie'
+import {getCookie} from '@/utils/cache'
 // 401拦截
 const resp401 = {
   /**
@@ -58,7 +58,7 @@ const reqCommon = {
   onFulfilled(config, options) {
     const {message} = options
     const {url, xsrfCookieName} = config
-    if (url.indexOf('login') === -1 && xsrfCookieName && !Cookie.get(xsrfCookieName)) {
+    if (url.indexOf('login') === -1 && xsrfCookieName && !getCookie(xsrfCookieName)) {
       message.warning('认证 token 已过期，请重新登录')
     }
     return config

src/utils/cache.js

@@ -0,0 +1,105 @@
+const Cookies = require('js-cookie')
+
+const prefix = process.env.VUE_APP_NAME || 'vue-antd-admin'
+
+// 动态获取cookie参数
+const getCookieAttr = () => {
+  return {
+    path: process.env.BASE_URL || '/'
+  }
+}
+
+const ck = (key) => {
+    return prefix + "." + key;
+}
+
+// 设置cookie值
+const setCookie = (key, value, options) => {
+    if (!key) {
+        return;
+    }
+    const cookieAttr = getCookieAttr()
+    if (options && typeof options === 'object') {
+        for (const key in options) {
+            cookieAttr[key] = options[key]
+        }
+    }
+    Cookies.set(ck(key), value, cookieAttr);
+}
+
+// 获取cookie值
+const getCookie = (key) => {
+    if (!key) {
+        return;
+    }
+    return Cookies.get(ck(key));
+}
+
+// 删除cookie值
+const removeCookie = (key) => {
+    if (!key) {
+        return;
+    }
+    return Cookies.remove(ck(key));
+}
+
+// 设置sessionStorage值
+const setSessionStore = (key, value) => {
+    if (!key) {
+        return;
+    }
+    sessionStorage.setItem(ck(key), value);
+}
+
+// 获取sessionStorage值
+const getSessionStore = (key) => {
+    if (!key) {
+        return;
+    }
+    return sessionStorage.getItem(ck(key));
+}
+
+// 删除sessionStorage值
+const removeSessionStore = (key) => {
+    if (!key) {
+        return;
+    }
+    return sessionStorage.removeItem(ck(key));
+}
+
+
+// 设置localStorage值
+const setLocalStorage = (key, value) => {
+    if (!key) {
+        return;
+    }
+    localStorage.setItem(ck(key), value);
+}
+
+// 获取localStorage值
+const getLocalStorage = (key) => {
+    if (!key) {
+        return;
+    }
+    return localStorage.getItem(ck(key));
+}
+
+// 删除localStorage值
+const removeLocalStorage = (key) => {
+    if (!key) {
+        return;
+    }
+    return localStorage.removeItem(ck(key));
+}
+
+module.exports = {
+    setCookie,
+    getCookie,
+    removeCookie,
+    setSessionStore,
+    getSessionStore,
+    removeSessionStore,
+    setLocalStorage,
+    getLocalStorage,
+    removeLocalStorage
+  }

src/utils/request.js

@@ -1,5 +1,6 @@
 import axios from 'axios'
-import Cookie from 'js-cookie'
+// import Cookie from 'js-cookie'
+import {setCookie, getCookie, removeCookie, removeLocalStorage} from '@/utils/cache'
 
 // 跨域认证信息 header 名
 const xsrfHeaderName = 'Authorization'
@@ -49,7 +50,7 @@ async function request(url, method, params, config) {
 function setAuthorization(auth, authType = AUTH_TYPE.BEARER) {
   switch (authType) {
     case AUTH_TYPE.BEARER:
-      Cookie.set(xsrfHeaderName, 'Bearer ' + auth.token, {expires: auth.expireAt})
+      setCookie(xsrfHeaderName, 'Bearer ' + auth.token, {expires: auth.expireAt})
       break
     case AUTH_TYPE.BASIC:
     case AUTH_TYPE.AUTH1:
@@ -66,7 +67,7 @@ function setAuthorization(auth, authType = AUTH_TYPE.BEARER) {
 function removeAuthorization(authType = AUTH_TYPE.BEARER) {
   switch (authType) {
     case AUTH_TYPE.BEARER:
-      Cookie.remove(xsrfHeaderName)
+      removeCookie(xsrfHeaderName)
       break
     case AUTH_TYPE.BASIC:
     case AUTH_TYPE.AUTH1:
@@ -74,6 +75,10 @@ function removeAuthorization(authType = AUTH_TYPE.BEARER) {
     default:
       break
   }
+  removeLocalStorage(process.env.VUE_APP_ROUTES_KEY)
+  removeLocalStorage(process.env.VUE_APP_PERMISSIONS_KEY)
+  removeLocalStorage(process.env.VUE_APP_ROLES_KEY)
+  removeLocalStorage(process.env.VUE_APP_USER_KEY)
 }
 
 /**
@@ -84,7 +89,7 @@ function removeAuthorization(authType = AUTH_TYPE.BEARER) {
 function checkAuthorization(authType = AUTH_TYPE.BEARER) {
   switch (authType) {
     case AUTH_TYPE.BEARER:
-      if (Cookie.get(xsrfHeaderName)) {
+      if (getCookie(xsrfHeaderName)) {
         return true
       }
       break

src/utils/themeUtil.js

@@ -2,6 +2,7 @@ const client = require('webpack-theme-color-replacer/client')
 const {theme} = require('../config')
 const {getMenuColors, getAntdColors, getThemeToggleColors, getFunctionalColors} = require('../utils/colors')
 const {ANTD} = require('../config/default')
+const {getLocalStorage} = require('./cache')
 
 function getThemeColors(color, $theme) {
   const _color = color || theme.color
@@ -82,7 +83,7 @@ function loadLocalTheme(localSetting) {
 function getLocalSetting(loadTheme) {
   let localSetting = {}
   try {
-    const localSettingStr = localStorage.getItem(process.env.VUE_APP_SETTING_KEY)
+    const localSettingStr = getLocalStorage(process.env.VUE_APP_SETTING_KEY)
     localSetting = JSON.parse(localSettingStr)
   } catch (e) {
     console.error(e)