feat: init

src/router/guard/index.ts

@@ -0,0 +1,17 @@
+import { setRouteEmitter } from '@/utils/route-listener'
+import type { Router } from 'vue-router'
+import setupPermissionGuard from './permission'
+import setupUserLoginInfoGuard from './userLoginInfo'
+
+function setupPageGuard(router: Router) {
+  router.beforeEach(async (to) => {
+    // emit route change
+    setRouteEmitter(to)
+  })
+}
+
+export default function createRouteGuard(router: Router) {
+  setupPageGuard(router)
+  setupUserLoginInfoGuard(router)
+  setupPermissionGuard(router)
+}

src/router/guard/permission.ts

@@ -0,0 +1,48 @@
+import NProgress from 'nprogress' // progress bar
+import type { Router, RouteRecordNormalized } from 'vue-router'
+
+import usePermission from '@/hooks/permission'
+import { useAppStore, useUserStore } from '@/store'
+import { NOT_FOUND, WHITE_LIST } from '../constants'
+import { appRoutes } from '../routes'
+
+export default function setupPermissionGuard(router: Router) {
+  router.beforeEach(async (to, from, next) => {
+    const appStore = useAppStore()
+    const userStore = useUserStore()
+    const Permission = usePermission()
+    const permissionsAllow = Permission.accessRouter(to)
+    if (appStore.menuFromServer) {
+      // 针对来自服务端的菜单配置进行处理
+      // Handle routing configuration from the server
+
+      // 根据需要自行完善来源于服务端的菜单配置的permission逻辑
+      // Refine the permission logic from the server's menu configuration as needed
+      if (!appStore.appAsyncMenus.length && !WHITE_LIST.find((el) => el.name === to.name)) {
+        await appStore.fetchServerMenuConfig()
+      }
+      const serverMenuConfig = [...appStore.appAsyncMenus, ...WHITE_LIST]
+
+      let exist = false
+      while (serverMenuConfig.length && !exist) {
+        const element = serverMenuConfig.shift()
+        if (element?.name === to.name) exist = true
+
+        if (element?.children) {
+          serverMenuConfig.push(...(element.children as unknown as RouteRecordNormalized[]))
+        }
+      }
+      if (exist && permissionsAllow) {
+        next()
+      } else next(NOT_FOUND)
+    } else {
+      // eslint-disable-next-line no-lonely-if
+      if (permissionsAllow) next()
+      else {
+        const destination = Permission.findFirstPermissionRoute(appRoutes, userStore.role) || NOT_FOUND
+        next(destination)
+      }
+    }
+    NProgress.done()
+  })
+}

src/router/guard/userLoginInfo.ts

@@ -0,0 +1,43 @@
+import NProgress from 'nprogress' // progress bar
+import type { LocationQueryRaw, Router } from 'vue-router'
+
+import { useUserStore } from '@/store'
+import { isLogin } from '@/utils/auth'
+
+export default function setupUserLoginInfoGuard(router: Router) {
+  router.beforeEach(async (to, from, next) => {
+    NProgress.start()
+    const userStore = useUserStore()
+    if (isLogin()) {
+      if (userStore.role) {
+        next()
+      } else {
+        try {
+          await userStore.info()
+          next()
+        } catch (error) {
+          await userStore.logout()
+          next({
+            name: 'login',
+            query: {
+              redirect: to.name,
+              ...to.query,
+            } as LocationQueryRaw,
+          })
+        }
+      }
+    } else {
+      if (to.name === 'login') {
+        next()
+        return
+      }
+      next({
+        name: 'login',
+        query: {
+          redirect: to.name,
+          ...to.query,
+        } as LocationQueryRaw,
+      })
+    }
+  })
+}