feat:vue-element-admin升级改造vue3

src/store/index.ts

@@ -21,7 +21,7 @@ export const key: InjectionKey<Store<RootStateTypes>> = Symbol()
 
 export const store = createStore<RootStateTypes>({modules})
 
-export function userStore(){
+export function useStore(){
     return baseUseStore(key)
 }
 

src/store/interface.ts

@@ -1,3 +1,5 @@
+import {RouteRecordRaw} from "vue-router";
+
 // 接口类型声明
 export interface UserState {
     token: string,
@@ -16,8 +18,24 @@ export interface AppState {
     }
 }
 
+export interface SettingState {
+    theme: string,
+    tagsView: boolean,
+    fixedHeader: boolean,
+    showSettings: boolean,
+    sidebarLogo: boolean
+}
+
+
+export interface PermissionState{
+    routes:RouteRecordRaw[]
+    addRoutes: RouteRecordRaw[]
+}
+
 // 顶级类型声明
 export interface RootStateTypes {
     user: UserState,
-    app:AppState
+    app: AppState,
+    setting: SettingState,
+    permission:PermissionState
 }

src/store/modules/app.ts

@@ -1,5 +1,5 @@
 import {Module} from "vuex";
-import {RootStateTypes, AppState} from "@store/interface";
+import {AppState,RootStateTypes} from "@store/interface";
 import {Local} from "@utils/storage";
 
 const appModule: Module<AppState, RootStateTypes> = {

src/store/modules/permission.ts

@@ -0,0 +1,67 @@
+import {Module} from "vuex";
+import {PermissionState, RootStateTypes} from "@store/interface";
+import {RouteRecordRaw} from 'vue-router'
+import {constantRoutes} from '@/router'
+import {getRouteList} from "@api/system/menu";
+
+
+const hasPermission = (roles: string[], route: RouteRecordRaw) => {
+    // 超级管理员放行
+    if (roles.includes('ROOT')) {
+        return true
+    }
+    if (route.meta && route.meta.roles) {
+        return roles.some(role => {
+            if (route.meta?.roles !== undefined) {
+                return (route.meta.roles as string[]).includes(role);
+            }
+        })
+    } else {
+        return true
+    }
+}
+
+export const filterAsyncRoutes = (routes: RouteRecordRaw[], roles: string[]) => {
+    const res: RouteRecordRaw[] = []
+    routes.forEach(route => {
+        const tmp = {...route}
+        if (hasPermission(roles, tmp)) {
+            if (tmp.children) {
+                tmp.children = filterAsyncRoutes(tmp.children, roles)
+            }
+            res.push(tmp)
+        }
+    })
+    return res
+}
+
+
+const permissionModule: Module<PermissionState, RootStateTypes> = {
+    namespaced: true,
+    state: {
+        routes: [],
+        addRoutes: []
+    },
+    mutations: {
+        SET_ROUTES: (state: PermissionState, routes: RouteRecordRaw[]) => {
+            state.addRoutes = routes
+            state.routes = constantRoutes.concat(routes)
+        }
+    },
+    actions: {
+        generateRoutes({commit}, roles: string[]) {
+            return new Promise((resolve, reject) => {
+                getRouteList().then(response => {
+                    const asyncRoutes = response.data
+                    let accessedRoutes = filterAsyncRoutes(asyncRoutes, roles)
+                    commit('SET_ROUTES', accessedRoutes)
+                    resolve(accessedRoutes)
+                }).catch(error => {
+                    reject(error)
+                })
+            })
+        }
+
+    }
+}
+export default permissionModule;

src/store/modules/settings.ts

@@ -0,0 +1,49 @@
+import {Module} from "vuex";
+import {SettingState, RootStateTypes} from "@store/interface";
+import defaultSettings from '../../settings'
+
+const {showSettings, tagsView, fixedHeader, sidebarLogo} = defaultSettings
+
+const settingModule: Module<SettingState, RootStateTypes> = {
+    namespaced: true,
+    state: {
+        theme: '',
+        showSettings: showSettings,
+        tagsView: tagsView,
+        fixedHeader: fixedHeader,
+        sidebarLogo: sidebarLogo,
+    },
+    mutations: {
+        CHANGE_SETTING: (state: SettingState, payload: { key: string, value: any }) => {
+            const {key, value} = payload
+            switch (key) {
+                case 'theme':
+                    state.theme = value
+                    break
+                case 'showSettings':
+                    state.showSettings = value
+                    break
+                case 'fixedHeader':
+                    state.fixedHeader = value
+                    break
+                case 'tagsView':
+                    state.tagsView = value
+                    break
+                case 'sidebarLogo':
+                    state.sidebarLogo = value
+                    break
+                default:
+                    break
+            }
+        }
+    },
+    actions: {
+        changeSetting({commit}, data) {
+            commit('CHANGE_SETTING', data)
+        }
+    }
+}
+
+export default settingModule;
+
+

src/store/modules/user.ts

@@ -1,7 +1,9 @@
 import {Module} from "vuex";
 import {UserState, RootStateTypes} from "@store/interface";
 import {Local} from "@utils/storage";
-import {getUserInfo, login, logout} from "@api/login"
+import {getUserInfo, login, logout} from "@api/login";
+import {resetRouter} from "@router";
+
 
 const getDefaultState = () => {
     return {
@@ -107,13 +109,24 @@ const userModule: Module<UserState, RootStateTypes> = {
                 logout().then(() => {
                     Local.remove('token')
                     commit('RESET_STATE')
+                    resetRouter()
+                    resolve(null)
                 }).catch(error => {
                     reject(error)
                 })
             }))
+        },
+
+        /**
+         * 清除 Token
+         */
+        resetToken({commit}){
+            return new Promise(resolve=>{
+                Local.remove('token')
+                commit('RESET_STATE')
+                resolve(null)
+            })
         }
-
-
     }
 }