Merge pull request #11 from github-learning/dev

Dev

Author: github-learning

README1.md

@@ -18,8 +18,10 @@
 项目功能 业务流程  
 最有成就感的事，或解决的难题
 
-前后流程 角色 /
-是否踩过坑
+TODO
+
+1. 根据用户信息，获取当前路由
+2. 动态路由匹配
 
 zrh test
-test2
+test2

src/apis/user.ts

@@ -12,6 +12,7 @@ export interface Profile {
   avatar: string
   description: string
   // roles: IRole[]
+  // roleIds?: string[] // 修改用户的时候，后端接受只要id
   roleIds?: number[] // 修改用户的时候，后端接受只要id
 }
 

src/layout/components/layout-menu/index.vue

@@ -8,13 +8,25 @@
       text-color="#333"
       active-text-color="#2469f0"
     >
-      <menu-tree :menu-data="layoutsRoutes"> </menu-tree>
+      <menu-tree :menu-data="menuRoutes"> </menu-tree>
+      <!-- <menu-tree :menu-data="layoutsRoutes"> </menu-tree> -->
     </el-menu>
   </div>
 </template>
 
 <script setup>
-import { layoutsRoutes } from '@/router'
+// import { layoutsRoutes } from '@/router'
+import { useMenuStore } from '@/stores/menu'
+
+const meuStore = useMenuStore()
+
+const menuRoutes = computed(() => meuStore.state.authMenuTreeData)
+
+console.log(
+  '%c [  ]-25',
+  'font-size:13px; background:pink; color:#bf2c9f;',
+  menuRoutes.value
+)
 </script>
 
 <style scoped>

src/layout/components/layout-menu/menu-tree.vue

@@ -1,6 +1,6 @@
 <template>
   <template v-for="(item, index) in menuData">
-    <el-sub-menu v-if="item.children" :key="index" :index="item.path">
+    <el-sub-menu v-if="item.children?.length" :key="index" :index="item.path">
       <template #title>
         <span class="menu-item-title"> {{ item.meta?.title }}</span>
       </template>
@@ -15,10 +15,16 @@
 </template>
 <script setup lang="ts">
 import { RouteRecordRaw } from 'vue-router'
-defineProps<{
+const props = defineProps<{
   menuData: RouteRecordRaw[]
 }>()
 
+console.log(
+  '%c [ props ]-23',
+  'font-size:13px; background:pink; color:#bf2c9f;',
+  props.menuData
+)
+
 defineOptions({
   name: 'MenuTree'
 })

src/main.ts

@@ -7,6 +7,7 @@ import element from './plugins/element'
 import directives from './directives/index'
 // 注册持久化插件
 import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'
+import router from './router'
 import './style.css'
 import './permission'
 import './style/index.css'
@@ -20,7 +21,7 @@ for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
   app.component(key, component)
 }
 import 'virtual:uno.css'
-import { router } from './router'
+
 pinia.use(piniaPluginPersistedstate)
 window.document.documentElement.setAttribute('data-theme', 'light')
 app.use(router)

src/permission.ts

@@ -1,36 +1,143 @@
-import { router } from '@/router'
+import router from '@/router'
 import NProgress from 'nprogress'
 import 'nprogress/nprogress.css'
 import { getToken } from '@/utils'
+import { useUserStore } from './stores'
+import { usePermissionStore } from './stores/permission'
 NProgress.configure({ showSpinner: false })
-const whiteList = ['/login', '/register']
+// const whiteList = ['/login', '/register']
+
+// router.beforeEach(async (to) => {
+//   // 获取用户信息
+//   NProgress.start()
+//   const userStore = useUserStore()
+//   const permissionStore = usePermissionStore()
+//   const hasToken = getToken()
+//   console.log('hasToken', hasToken)
+
+//   if (hasToken) {
+//     if (to.path === '/login') {
+//       NProgress.done()
+//       return {
+//         path: '/',
+//         replace: true
+//       }
+//     } else {
+//       // 用token 换取用户信息
+//       try {
+//         const hasRoles = userStore.state.roles.length > 0
+//         if (hasRoles) {
+//           NProgress.done()
+//           return true
+//         }
+//         await userStore.getUserInfo()
+//         // const roleIds = userStore.state.roleIds
+//         // console.log('roleIds', roleIds)
+//         // 用角色生成菜单树
+//         const routes = await permissionStore.generateRoutes()
+
+//         console.log(
+//           '%c [routes  ]-39',
+//           'font-size:13px; background:pink; color:#bf2c9f;',
+//           routes
+//         )
+
+//         routes.forEach(router.addRoute) // 内部添加到映射表中
+//         console.log('to.path', to.path)
+//         // 确保动态路由加载完成后跳转
+//         // 避免重复跳转检查
+//         // if (to.matched.length === 0) {
+//         //   return {
+//         //     path: to.path, // 重定向到原目标路径
+//         //     replace: true // 避免重复历史记录
+//         //   }
+//         // }
+//         // return router.push(to.path)
+//         NProgress.done()
+//         return true
+//       } catch {
+//         userStore.logout()
+//         NProgress.done()
+//         return `login?redirect=${to.path}`
+//       }
+//     }
+//     NProgress.done()
+//   } else {
+//     if (whiteList.includes(to.path)) {
+//       NProgress.done()
+//       return true
+//     }
+//     return {
+//       path: '/login',
+//       // 给予跳转后重定向参数
+//       query: {
+//         redirect: to.path,
+//         ...to.query
+//       }
+//     }
+//   }
+// })
+// const whiteList = ['/login']
+// 远程路由是否加载
+
+const whiteList = ['/login']
 router.beforeEach(async (to) => {
-  // 获取用户信息
   NProgress.start()
   const hasToken = getToken()
-  console.log('hasToken', hasToken)
-
+  const userStore = useUserStore()
+  const permissionStore = usePermissionStore()
   if (hasToken) {
+    //  用token换用户信息
     if (to.path === '/login') {
       NProgress.done()
       return {
         path: '/',
         replace: true
       }
+    } else {
+      // 用token 换取 用户信息， 也有可能token是伪造的
+      try {
+        const hasRoles = userStore.state.roles.length > 0
+        if (hasRoles) {
+          NProgress.done()
+          return true
+        }
+        await userStore.getUserInfo()
+        // const roles = userStore.state.roles // 稍后用角色来生成菜单树
+        const routes = await permissionStore.generateRoutes()
+        routes.forEach(router.addRoute) // 内部添加到映射表中
+        // 如果目标路由未匹配，则重新导航
+        if (to.matched.length === 0) {
+          return { path: to.fullPath, replace: true }
+        }
+
+        NProgress.done()
+        return true
+      } catch (e) {
+        console.log(
+          '%c [  ]-112',
+          'font-size:13px; background:pink; color:#bf2c9f;',
+          e
+        )
+        userStore.logout()
+        NProgress.done()
+        return '/login?redirect=' + to.path
+      }
     }
-    NProgress.done()
   } else {
     if (whiteList.includes(to.path)) {
       NProgress.done()
       return true
     }
     return {
       path: '/login',
-      // 给予跳转后重定向参数
       query: {
         redirect: to.path,
         ...to.query
       }
+      // 给与跳转后的重定向参数，还有其他参数
     }
   }
 })
+
+// return router.push(to.path)