cache routes and user info data locally

package.json

@@ -25,6 +25,7 @@
     "fuse.js": "6.6.2",
     "js-cookie": "3.0.1",
     "jsencrypt": "3.3.1",
+    "lodash-es": "^4.17.21",
     "nprogress": "0.2.0",
     "pinia": "2.0.22",
     "pinia-plugin-persistedstate": "^3.1.0",

src/api/login.js

@@ -1,4 +1,6 @@
 import request from '@/utils/request'
+import usePermissionStore from "@/store/modules/permission";
+import useUserStore from "@/store/modules/user";
 
 // 登录方法
 export function login(username, password, code, uuid) {
@@ -32,6 +34,11 @@ export function register(data) {
 
 // 获取用户详细信息
 export function getInfo() {
+    if (useUserStore().userInfoRes) {
+        return new Promise((resolve, reject) => {
+            resolve(useUserStore().userInfoRes)
+        })
+    }
     return request({
         url: '/getInfo',
         method: 'get'
@@ -60,6 +67,11 @@ export function getCodeImg() {
 
 // 获取路由
 export const getRouters = () => {
+    if (usePermissionStore().routesRes) {
+        return new Promise((resolve, reject) => {
+            resolve(usePermissionStore().routesRes)
+        })
+    }
     return request({
         url: '/getRouters',
         method: 'get'

src/store/modules/permission.js

@@ -1,9 +1,10 @@
 import auth from '@/plugins/auth'
-import router, { constantRoutes, dynamicRoutes } from '@/router'
+import router, {constantRoutes, dynamicRoutes} from '@/router'
 import Layout from '@/layout/index'
 import ParentView from '@/components/ParentView'
 import InnerLink from '@/layout/components/InnerLink'
 import {getRouters} from "@/api/login";
+import {cloneDeep} from 'lodash-es'
 
 // 匹配views里面所有的.vue文件
 const modules = import.meta.glob('./../../views/**/*.vue')
@@ -12,6 +13,7 @@ const usePermissionStore = defineStore(
     'permission',
     {
         state: () => ({
+            routesRes: null,
             routes: [],
             addRoutes: [],
             defaultRoutes: [],
@@ -19,6 +21,9 @@ const usePermissionStore = defineStore(
             sidebarRouters: []
         }),
         actions: {
+            setRoutesRes(res) {
+                this.routesRes = cloneDeep(res)
+            },
             setRoutes(routes) {
                 this.addRoutes = routes
                 this.routes = constantRoutes.concat(routes)
@@ -36,6 +41,9 @@ const usePermissionStore = defineStore(
                 return new Promise(resolve => {
                     // 向后端请求路由数据
                     getRouters().then(res => {
+                        if (!this.routesRes) {
+                            this.setRoutesRes(res)
+                        }
                         const sdata = JSON.parse(JSON.stringify(res.data))
                         const rdata = JSON.parse(JSON.stringify(res.data))
                         const defaultData = JSON.parse(JSON.stringify(res.data))
@@ -43,7 +51,9 @@ const usePermissionStore = defineStore(
                         const rewriteRoutes = filterAsyncRouter(rdata, false, true)
                         const defaultRoutes = filterAsyncRouter(defaultData)
                         const asyncRoutes = filterDynamicRoutes(dynamicRoutes)
-            asyncRoutes.forEach(route => { router.addRoute(route) })
+                        asyncRoutes.forEach(route => {
+                            router.addRoute(route)
+                        })
                         this.setRoutes(rewriteRoutes)
                         this.setSidebarRouters(constantRoutes.concat(sidebarRoutes))
                         this.setDefaultRoutes(sidebarRoutes)
@@ -52,7 +62,9 @@ const usePermissionStore = defineStore(
                     })
                 })
             }
-    }
+        }, persist: [
+            {paths: ['routesRes'], storage: localStorage}
+        ]
     })
 
 // 遍历后台传来的路由字符串，转换为组件对象

src/store/modules/user.js

@@ -1,6 +1,7 @@
 import {getInfo, login, logout} from '@/api/login'
 import {getToken, removeToken, setToken} from '@/utils/auth'
 import defAva from '@/assets/images/profile.jpg'
+import {cloneDeep} from "lodash-es";
 
 const useUserStore = defineStore(
     'user',
@@ -11,9 +12,13 @@ const useUserStore = defineStore(
             avatar: '',
             roles: [],
             tenant: '',
-            permissions: []
+            permissions: [],
+            userInfoRes: null
         }),
         actions: {
+            setUserInfoRes(res) {
+                this.userInfoRes = cloneDeep(res)
+            },
             // 登录
             login(userInfo) {
                 const username = userInfo.username.trim()
@@ -36,6 +41,9 @@ const useUserStore = defineStore(
             getInfo() {
                 return new Promise((resolve, reject) => {
                     getInfo().then(res => {
+                        if (!this.userInfoRes) {
+                            this.setUserInfoRes(res)
+                        }
                         const user = res.user
                         const avatar = (user.avatar == "" || user.avatar == null) ? defAva : import.meta.env.VITE_APP_BASE_API + user.avatar;
 
@@ -60,6 +68,7 @@ const useUserStore = defineStore(
                         this.token = ''
                         this.roles = []
                         this.permissions = []
+                        this.userInfoRes = null
                         removeToken()
                         resolve()
                     }).catch(error => {
@@ -69,7 +78,7 @@ const useUserStore = defineStore(
             }
         },
         persist: [
-            {paths: ['tenant'],storage:localStorage}
+            {paths: ['tenant', 'userInfoRes'], storage: localStorage}
         ]
     },
 )