动态路由

src/getMenu.ts

@@ -0,0 +1,181 @@
+import router, { asyncRoutes } from '@/router'
+import settings from './settings'
+import { getToken, setToken, TokenKey } from '@/utils/auth'
+import NProgress from 'nprogress'
+NProgress.configure({ showSpinner: false }) // NProgress Configuration
+import 'nprogress/nprogress.css'
+import getPageTitle from '@/utils/getPageTitle'
+import { RouterRowTy } from '~/router'
+import { useUserStore } from '@/store/user'
+import { usePermissionStore } from '@/store/permission'
+import Layout from '@/layout'
+import { setTree } from '@/utils/validate'
+import * as _ from 'lodash'
+const whiteList = ['/login', '/404', '/401'] // no redirect whitelist
+router.beforeEach(async (to: any, from, next: any) => {
+  // start progress bar
+  if (settings.isNeedNprogress) NProgress.start()
+  // set page title
+  document.title = getPageTitle(to.meta.title)
+  if (!settings.isNeedLogin) setToken(TokenKey, settings.tmpToken)
+  const hasToken: string | null = getToken(TokenKey)
+
+  const userStore = useUserStore()
+  const permissionStore = usePermissionStore()
+  if (hasToken) {
+    if (to.path === '/login') {
+      // if is logged in, redirect to the home page
+      next({ path: '/' })
+    } else {
+      //judge isGetUserInfo
+      const isGetUserInfo: boolean = permissionStore.isGetUserInfo
+      if (isGetUserInfo) {
+        next()
+      } else {
+        try {
+          let accessRoutes: any = []
+          if (settings.isNeedLogin) {
+            // get user info
+            // note: roles must be a object array! such as: ['admin'] or ,['developer','editor']
+            await userStore.getInfo()
+            const treeData: any = await userStore.getMenuInfo()
+            const treeMenu = setTree(treeData, 'up_auth_id', 'auth_id')
+            const dataMenu = _.unionBy(treeMenu, 'auth_id')
+            const menus = parseMenu(dataMenu)
+            // const { roles }: any = await userStore.getInfo()
+            // accessRoutes = await permissionStore.generateRoutes(roles)
+            accessRoutes = menus
+          } else {
+            accessRoutes = asyncRoutes
+          }
+          // setting constRouters and accessRoutes to vuex , in order to sideBar for using
+          permissionStore.M_routes(accessRoutes)
+          // dynamically add accessible routes
+          //router4 addRoutes destroyed
+          accessRoutes.forEach((route: RouterRowTy) => {
+            router.addRoute(route)
+          })
+          //already get userInfo
+          permissionStore.M_isGetUserInfo(true)
+          // hack method to ensure that addRoutes is complete
+          // set the replace: true, so the navigation will not leave a history record
+          next({ ...to, replace: true })
+        } catch (err) {
+          console.log(err)
+          await userStore.resetState()
+          next(`/login?redirect=${to.path}`)
+          if (settings.isNeedNprogress) NProgress.done()
+        }
+      }
+    }
+  } else {
+    if (whiteList.indexOf(to.path) !== -1) {
+      next()
+    } else {
+      next(`/login?redirect=${to.path}`)
+      if (settings.isNeedNprogress) NProgress.done()
+    }
+  }
+})
+
+function parseMenu(arr: Array<any>) {
+  const menus: any = []
+  arr.forEach((item, index) => {
+    if (!item.children) {
+      menus.push({
+        path: item.route_info,
+        component: Layout,
+        name: item.auth_ident,
+        redirect: item.route_info,
+        meta: {
+          title: item.auth_name,
+          elSvgIcon: 'Fold',
+          show_index: item.show_index,
+        },
+        children: [
+          {
+            path: item.route_info,
+            component: () => import('./views' + item.file_link),
+            // component: () => import('@/views/dashboard/index.vue'),
+            name: item.auth_ident + index,
+            meta: {
+              title: item.auth_name,
+            },
+          },
+        ],
+      })
+    } else {
+      if (item.children.length <= 1) {
+        menus.push({
+          path: item.route_info,
+          component: Layout,
+          name: item.auth_ident,
+          redirect: item.route_info,
+          meta: {
+            title: item.auth_name,
+            elSvgIcon: 'Fold',
+            show_index: item.show_index,
+          },
+          children: [
+            {
+              path: item.route_info,
+              component: () => import('./views' + item.file_link),
+              name: item.auth_ident + index,
+              meta: {
+                title: item.auth_name,
+              },
+            },
+          ],
+        })
+      } else {
+        const datas = item.children
+        const arrs: any = []
+        datas.forEach((item, ci) => {
+          arrs.push({
+            path: item.route_info,
+            component: () => import('./views' + item.file_link),
+            name: item.auth_ident + ci,
+            meta: {
+              title: item.auth_name,
+            },
+          })
+        })
+        menus.push({
+          path: item.route_info,
+          component: Layout,
+          name: item.auth_ident,
+          meta: { show_index: item.show_index },
+          children: [
+            {
+              path: item.route_info,
+              component: {
+                render: () => h(resolveComponent('router-view')),
+              },
+              name: item.auth_ident,
+              redirect: item.route_info,
+              meta: {
+                title: item.auth_name + index,
+                elSvgIcon: 'Fold',
+              },
+              children: arrs,
+            },
+          ],
+        })
+      }
+    }
+  })
+  const allMenus = menus.length
+    ? menus.sort((a, b) => a.meta.show_index - b.meta.show_index)
+    : []
+  allMenus.push({
+    path: '/:pathMatch(.*)',
+    redirect: '/404',
+    hidden: true,
+  })
+  allMenus[0].path = '/'
+  return allMenus
+}
+
+router.afterEach(() => {
+  if (settings.isNeedNprogress) NProgress.done()
+})

src/layout/Layout.vue

@@ -15,31 +15,31 @@
 <script lang="ts">
 /*可以设置默认的名字*/
 export default {
-  name: 'Layout'
-}
+  name: "Layout",
+};
 </script>
 
 <script setup lang="ts">
-import { Sidebar, AppMain, Navbar } from './components'
-import NavBarTop from './components/NavBarTop/index.vue'
-const appStore = useAppStore()
+import { Sidebar, AppMain, Navbar } from "./components";
+import NavBarTop from "./components/NavBarTop/index.vue";
+//import ResizeHook to   listen  page size that   open or close
+import ResizeHook from "./hook/ResizeHandler";
+import { useAppStore } from "@/store/app";
+const appStore = useAppStore();
 const opened = computed(() => {
-  return appStore.sidebar.opened
-})
+  return appStore.sidebar.opened;
+});
 
 const settings = computed(() => {
-  return appStore.settings
-})
+  return appStore.settings;
+});
 const classObj = computed(() => {
   return {
     closeSidebar: !opened.value,
-    hideSidebar: !settings.value.showLeftMenu
-  }
-})
-//import ResizeHook to   listen  page size that   open or close
-import ResizeHook from './hook/ResizeHandler'
-import { useAppStore } from '@/store/app'
-ResizeHook()
+    hideSidebar: !settings.value.showLeftMenu,
+  };
+});
+ResizeHook();
 </script>
 
 <style lang="scss" scoped>

src/layout/hook/menu.ts

@@ -0,0 +1,20 @@
+import Layout from '@/layout'
+
+const HomeRoutes = {
+  path: '',
+  component: Layout,
+  name: '',
+  redirect: '',
+  //using el svg icon, the elSvgIcon first when at the same time using elSvgIcon and icon
+  meta: { title: '', elSvgIcon: 'Fold', breadcrumb: false },
+  children: [
+    {
+      path: '',
+      name: '',
+      meta: { title: '' },
+      component: '',
+    },
+  ],
+}
+
+export default HomeRoutes

src/main.ts

@@ -38,8 +38,8 @@ app.component('SvgIcon', svgIcon)
 import directive from '@/directives'
 directive(app)
 //import router intercept
-import './permission'
-
+// import './permission'
+import './getMenu'
 //import theme
 import './theme/index.scss'
 //import unocss

src/store/user.ts

@@ -13,7 +13,6 @@ import router, { constantRoutes, asyncRoutes } from '@/router'
 import { defineStore } from 'pinia'
 import { usePermissionStore } from '@/store/permission'
 import { useTagsViewStore } from '@/store/tagsView'
-
 const resetRouter = () => {
   const asyncRouterNameArr: Array<any> = asyncRoutes.map((mItem) => mItem.name)
   asyncRouterNameArr.forEach((name) => {
@@ -37,7 +36,7 @@ export const useUserStore = defineStore('user', {
         ? sessionStorage.getItem('User_Id')
         : '',
       userPoewrList: sessionStorage.getItem('userAuthList')
-        ? JSON.parse(sessionStorage.getItem('userAuthList'))
+        ? JSON.parse(<any>sessionStorage.getItem('userAuthList'))
         : [],
     }
   },
@@ -167,6 +166,26 @@ export const useUserStore = defineStore('user', {
           })
       })
     },
+    getMenuInfo() {
+      return new Promise((resolve, reject) => {
+        Query({
+          id: 100,
+          dataContent: [getToken('userid')],
+        })
+          .then((res: ObjTy) => {
+            if (res.code == 0) {
+              const { listValues } = res.returnData
+              const datas: any = listValues
+              resolve(datas)
+            } else {
+              reject(res.returnData)
+            }
+          })
+          .catch((error: any) => {
+            reject(error)
+          })
+      })
+    },
     // user logout
     logout() {
       return new Promise((resolve, reject) => {

src/utils/validate.ts

@@ -3,7 +3,7 @@
  * @returns {Boolean}
  */
 export function isExternal(path: string): boolean {
-  return /^(https?:|mailto:|tel:)/.test(path);
+  return /^(https?:|mailto:|tel:)/.test(path)
 }
 
 /**
@@ -11,8 +11,8 @@ export function isExternal(path: string): boolean {
  * @returns {Boolean}
  */
 export function validUsername(str: string): boolean {
-  const valid_map = ["admin", "editor"];
-  return valid_map.indexOf(str.trim()) >= 0;
+  const valid_map = ['admin', 'editor']
+  return valid_map.indexOf(str.trim()) >= 0
 }
 
 /**
@@ -20,8 +20,8 @@ export function validUsername(str: string): boolean {
  * @returns {Boolean}
  */
 export function validURL(url: string): boolean {
-  const reg = /^(https?|ftp):\/\/([a-zA-Z0-9.-]+(:[a-zA-Z0-9.&%$-]+)*@)*((25[0-5]|2[0-4][0-9]|1[0-9]{2}|[1-9][0-9]?)(\.(25[0-5]|2[0-4][0-9]|1[0-9]{2}|[1-9]?[0-9])){3}|([a-zA-Z0-9-]+\.)*[a-zA-Z0-9-]+\.(com|edu|gov|int|mil|net|org|biz|arpa|info|name|pro|aero|coop|museum|[a-zA-Z]{2}))(:[0-9]+)*(\/($|[a-zA-Z0-9.,?'\\+&%$#=~_-]+))*$/;
-  return reg.test(url);
+  const reg = /^(https?|ftp):\/\/([a-zA-Z0-9.-]+(:[a-zA-Z0-9.&%$-]+)*@)*((25[0-5]|2[0-4][0-9]|1[0-9]{2}|[1-9][0-9]?)(\.(25[0-5]|2[0-4][0-9]|1[0-9]{2}|[1-9]?[0-9])){3}|([a-zA-Z0-9-]+\.)*[a-zA-Z0-9-]+\.(com|edu|gov|int|mil|net|org|biz|arpa|info|name|pro|aero|coop|museum|[a-zA-Z]{2}))(:[0-9]+)*(\/($|[a-zA-Z0-9.,?'\\+&%$#=~_-]+))*$/
+  return reg.test(url)
 }
 
 /**
@@ -29,8 +29,8 @@ export function validURL(url: string): boolean {
  * @returns {Boolean}
  */
 export function validLowerCase(str: string): boolean {
-  const reg = /^[a-z]+$/;
-  return reg.test(str);
+  const reg = /^[a-z]+$/
+  return reg.test(str)
 }
 
 /**
@@ -38,8 +38,8 @@ export function validLowerCase(str: string): boolean {
  * @returns {Boolean}
  */
 export function validUpperCase(str: string): boolean {
-  const reg = /^[A-Z]+$/;
-  return reg.test(str);
+  const reg = /^[A-Z]+$/
+  return reg.test(str)
 }
 
 /**
@@ -47,8 +47,8 @@ export function validUpperCase(str: string): boolean {
  * @returns {Boolean}
  */
 export function validAlphabets(str: string): boolean {
-  const reg = /^[A-Za-z]+$/;
-  return reg.test(str);
+  const reg = /^[A-Za-z]+$/
+  return reg.test(str)
 }
 
 /**
@@ -65,7 +65,7 @@ export function validAlphabets(str: string): boolean {
  * @returns {Boolean}
  */
 export function isString(str: any): boolean {
-  return typeof str === "string" || str instanceof String;
+  return typeof str === 'string' || str instanceof String
 }
 
 /**
@@ -73,10 +73,10 @@ export function isString(str: any): boolean {
  * @returns {Boolean}
  */
 export function isArray(arg: string) {
-  if (typeof Array.isArray === "undefined") {
-    return Object.prototype.toString.call(arg) === "[object Array]";
+  if (typeof Array.isArray === 'undefined') {
+    return Object.prototype.toString.call(arg) === '[object Array]'
   }
-  return Array.isArray(arg);
+  return Array.isArray(arg)
 }
 
 /**
@@ -87,28 +87,28 @@ export function isArray(arg: string) {
  */
 export function parseTime(time: any, cFormat: string) {
   if (arguments.length === 0 || !time) {
-    return null;
+    return null
   }
-  const format = cFormat || "{y}-{m}-{d} {h}:{i}:{s}";
-  let date;
-  if (typeof time === "object") {
-    date = time;
+  const format = cFormat || '{y}-{m}-{d} {h}:{i}:{s}'
+  let date
+  if (typeof time === 'object') {
+    date = time
   } else {
-    if (typeof time === "string") {
+    if (typeof time === 'string') {
       if (/^[0-9]+$/.test(time)) {
         // support "1548221490638"
-        time = parseInt(time);
+        time = parseInt(time)
       } else {
         // support safari
         // https://stackoverflow.com/questions/4310953/invalid-date-in-safari
-        time = time.replace(new RegExp(/-/gm), "/");
+        time = time.replace(new RegExp(/-/gm), '/')
       }
     }
 
-    if (typeof time === "number" && time.toString().length === 10) {
-      time = time * 1000;
+    if (typeof time === 'number' && time.toString().length === 10) {
+      time = time * 1000
     }
-    date = new Date(time);
+    date = new Date(time)
   }
   const formatObj = {
     y: date.getFullYear(),
@@ -118,47 +118,65 @@ export function parseTime(time: any, cFormat: string) {
     i: date.getMinutes(),
     s: date.getSeconds(),
     a: date.getDay(),
-  };
+  }
   const time_str = format.replace(/{([ymdhisa])+}/g, (result, key) => {
-    const value = formatObj[key];
+    const value = formatObj[key]
     // Note: getDay() returns 0 on Sunday
-    if (key === "a") {
-      return ["日", "一", "二", "三", "四", "五", "六"][value];
+    if (key === 'a') {
+      return ['日', '一', '二', '三', '四', '五', '六'][value]
     }
-    return value.toString().padStart(2, "0");
-  });
-  return time_str;
+    return value.toString().padStart(2, '0')
+  })
+  return time_str
 }
 
 export function translateDataToTreeAll(arr, parentKey, key) {
-  const map = {};
-  const result = [];
+  const map = {}
+  const result = []
   arr.forEach((element) => {
-    const id = element[key];
-    const pid = element[parentKey];
+    const id = element[key]
+    const pid = element[parentKey]
     if (map[id]) {
       map[id] = {
         ...element,
         children: map[id].children,
-      };
+      }
     } else {
       map[id] = {
         ...element,
         children: [],
-      };
+      }
     }
-    const item = map[id];
+    const item = map[id]
     if (pid <= 0) {
-      result.push(item);
+      result.push(item)
     } else {
       if (map[pid]) {
-        map[pid].children.push(item);
+        map[pid].children.push(item)
       } else {
         map[pid] = {
           children: [item],
-        };
+        }
       }
     }
-  });
-  return result;
+  })
+  return result
+}
+
+export function setTree(arr, parentKey, key) {
+  const result: any = []
+  const datas: any = []
+  for (let i = 0; i < arr.length; i++) {
+    for (let j = 0; j < arr.length - 1; j++) {
+      if (arr[i][key] == arr[j][parentKey]) {
+        const item = arr[i]
+        datas.push(arr[j])
+        item.children = datas
+        arr.splice(i, 1)
+      } else {
+        result.push(arr[i])
+      }
+    }
+  }
+  return result
 }