feat:增加切换角色支持

src/layout/components/header/HeaderAction.vue

@@ -2,11 +2,17 @@
 import { useUserStore } from '@/store/modules/user'
 import { useRouter } from 'vue-router'
 import { NDropdown } from 'naive-ui'
+import { resetRouter } from '@/router'
+import { usePermissionStore } from '@/store/modules/permission'
 
 const userStore = useUserStore()
 const router = useRouter()
 
 const options = [
+  {
+    label: '切换角色',
+    key: 'switchRole',
+  },
   {
     label: '退出登录',
     key: 'logout',
@@ -15,11 +21,50 @@ const options = [
 
 function handleSelect(key) {
   if (key === 'logout') {
-    userStore.logout()
+    logout()
-    $message.success('已退出登录')
+  } else if (key === 'switchRole') {
-    router.push({ path: '/login' })
+    switchRole()
   }
 }
+
+function logout() {
+  userStore.logout()
+  $message.success('已退出登录')
+  router.push({ path: '/login' })
+}
+
+function switchRole() {
+  const permissionStore = usePermissionStore()
+
+  const users = [
+    {
+      id: 1,
+      name: '大脸怪(admin)',
+      avatar: 'https://gitee.com/zclzone/res/raw/master/qs-zone/blob/img/lADPDiQ3QDTwsz3NAarNAaw_428_426.jpg',
+      email: 'Ronnie@123.com',
+      role: ['admin'],
+    },
+    {
+      id: 2,
+      name: '大脸怪(editor)',
+      avatar: 'https://gitee.com/zclzone/res/raw/master/qs-zone/blob/img/lADPDiQ3QDTwsz3NAarNAaw_428_426.jpg',
+      email: 'Ronnie@123.com',
+      role: ['editor'],
+    },
+    {
+      id: 3,
+      name: '访客(guest)',
+      avatar: 'https://gitee.com/zclzone/res/raw/master/qs-zone/blob/img/lADPDiQ3QDTwsz3NAarNAaw_428_426.jpg',
+      role: [],
+    },
+  ]
+
+  const switchUser = users[+userStore.userId % users.length]
+  resetRouter()
+  userStore.setUserInfo(switchUser)
+  permissionStore.generateRoutes(switchUser.role)
+  $message.success(`${switchUser.name}`)
+}
 </script>
 
 <template>

src/layout/components/sidebar/SideMenu.vue

@@ -1,7 +1,7 @@
 <script setup>
 import { NMenu } from 'naive-ui'
 import { useRouter } from 'vue-router'
-import { computed } from 'vue'
+import { computed, toRef } from 'vue'
 import { usePermissionStore } from '@/store/modules/permission'
 
 import { isExternal } from '@/utils/is'
@@ -10,10 +10,9 @@ const router = useRouter()
 const permissionStore = usePermissionStore()
 
 const { currentRoute } = router
-const routes = permissionStore.routes
 
 const menuOptions = computed(() => {
-  return generateOptions(routes, '')
+  return generateOptions(permissionStore.routes, '')
 })
 
 function resolvePath(basePath, path) {

src/router/index.js

@@ -11,9 +11,10 @@ export const router = createRouter({
 export function resetRouter() {
   router.getRoutes().forEach((route) => {
     const { name } = route
-    if (name && !WHITE_NAME_LIST.includes(name)) {
+    router.hasRoute(name) && router.removeRoute(name)
-      router.hasRoute(name) && router.removeRoute(name)
+  })
-    }
+  basicRoutes.forEach((route) => {
+    !router.hasRoute(route.name) && router.addRoute(route)
   })
 }
 

src/store/modules/user.js

@@ -42,5 +42,8 @@ export const useUserStore = defineStore('user', {
       removeToken()
       this.userInfo = {}
     },
+    setUserInfo(userInfo = {}) {
+      this.userInfo = { ...this.userInfo, ...userInfo }
+    },
   },
 })