first commit

src/router/guard/index.js

@@ -0,0 +1,7 @@
+import { createPageLoadingGuard } from './pageLoadingGuard'
+import { createPermissionGuard } from './permissionGuard'
+
+export function setupRouterGuard(router) {
+  createPageLoadingGuard(router)
+  createPermissionGuard(router)
+}

src/router/guard/pageLoadingGuard.js

@@ -0,0 +1,15 @@
+export function createPageLoadingGuard(router) {
+  router.beforeEach(() => {
+    $loadingBar.start()
+  })
+
+  router.afterEach(() => {
+    setTimeout(() => {
+      $loadingBar.finish()
+    }, 200)
+  })
+
+  router.onError(() => {
+    $loadingBar.error()
+  })
+}

src/router/guard/permissionGuard.js

@@ -0,0 +1,44 @@
+import { useUserStore } from '@/store/modules/user'
+import { usePermissionStore } from '@/store/modules/permission'
+import { NOT_FOUND_ROUTE } from '@/router/routes'
+import { getToken, refreshAccessToken, removeToken } from '@/utils/token'
+
+const WHITE_LIST = ['/login', '/redirect']
+export function createPermissionGuard(router) {
+  const userStore = useUserStore()
+  const permissionStore = usePermissionStore()
+  router.beforeEach(async (to, from, next) => {
+    const token = getToken()
+    if (token) {
+      if (to.path === '/login') {
+        next({ path: '/' })
+      } else {
+        if (userStore.userId) {
+          // 已经拿到用户信息
+          refreshAccessToken()
+          next()
+        } else {
+          try {
+            await userStore.getUserInfo()
+            const accessRoutes = permissionStore.generateRoutes(userStore.role)
+            accessRoutes.forEach((route) => {
+              !router.hasRoute(route.name) && router.addRoute(route)
+            })
+            router.addRoute(NOT_FOUND_ROUTE)
+            next({ ...to, replace: true })
+          } catch (error) {
+            removeToken()
+            $message.error(error)
+            next({ path: '/login', query: { ...to.query, redirect: to.path } })
+          }
+        }
+      }
+    } else {
+      if (WHITE_LIST.includes(to.path)) {
+        next()
+      } else {
+        next({ path: '/login', query: { ...to.query, redirect: to.path } })
+      }
+    }
+  })
+}

src/router/index.js

@@ -0,0 +1,23 @@
+import { createRouter, createWebHistory } from 'vue-router'
+import { setupRouterGuard } from './guard'
+import { basicRoutes } from './routes'
+
+export const router = createRouter({
+  history: createWebHistory('/'),
+  routes: basicRoutes,
+  scrollBehavior: () => ({ left: 0, top: 0 }),
+})
+
+export function resetRouter() {
+  router.getRoutes().forEach((route) => {
+    const { name } = route
+    if (name && !WHITE_NAME_LIST.includes(name)) {
+      router.hasRoute(name) && router.removeRoute(name)
+    }
+  })
+}
+
+export function setupRouter(app) {
+  app.use(router)
+  setupRouterGuard(router)
+}

src/router/routes/index.js

@@ -0,0 +1,111 @@
+import Layout from '@/layout/index.vue'
+import Dashboard from '@/views/dashboard/index.vue'
+
+export const basicRoutes = [
+  {
+    name: '404',
+    path: '/404',
+    component: () => import('@/views/error-page/404.vue'),
+    isHidden: true,
+  },
+  {
+    name: '401',
+    path: '/401',
+    component: () => import('@/views/error-page/401.vue'),
+    isHidden: true,
+  },
+  {
+    name: 'REDIRECT',
+    path: '/redirect',
+    component: Layout,
+    isHidden: true,
+    children: [
+      {
+        name: 'REDIRECT_NAME',
+        path: '',
+        component: () => import('@/views/redirect/index.vue'),
+      },
+    ],
+  },
+
+  {
+    name: 'LOGIN',
+    path: '/login',
+    component: () => import('@/views/login/index.vue'),
+    isHidden: true,
+    meta: {
+      title: '登录页',
+    },
+  },
+
+  {
+    name: 'HOME',
+    path: '/',
+    component: Layout,
+    redirect: '/dashboard',
+    meta: {
+      title: '首页',
+    },
+    children: [
+      {
+        name: 'DASHBOARD',
+        path: 'dashboard',
+        component: Dashboard,
+        meta: {
+          title: 'Dashboard',
+        },
+      },
+    ],
+  },
+
+  {
+    name: 'TEST',
+    path: '/test',
+    component: Layout,
+    redirect: '/test/unocss',
+    meta: {
+      title: '测试',
+    },
+    children: [
+      {
+        name: 'UNOCSS',
+        path: 'unocss',
+        component: () => import('@/views/test-page/TestUnocss.vue'),
+        meta: {
+          title: '测试unocss',
+        },
+      },
+      {
+        name: 'MESSAGE',
+        path: 'message',
+        component: () => import('@/views/test-page/TestMessage.vue'),
+        meta: {
+          title: '测试Message',
+        },
+      },
+      {
+        name: 'DIALOG',
+        path: 'dialog',
+        component: () => import('@/views/test-page/TestDialog.vue'),
+        meta: {
+          title: '测试Dialog',
+        },
+      },
+    ],
+  },
+]
+
+export const NOT_FOUND_ROUTE = {
+  name: 'NOT_FOUND',
+  path: '/:pathMatch(.*)*',
+  redirect: '/404',
+  isHidden: true,
+}
+
+const modules = import.meta.globEager('./modules/*.js')
+const asyncRoutes = []
+Object.keys(modules).forEach((key) => {
+  asyncRoutes.push(...modules[key].default)
+})
+
+export { asyncRoutes }

src/router/routes/modules/user.js

@@ -0,0 +1,34 @@
+import Layout from '@/layout/index.vue'
+
+export default [
+  {
+    name: 'USER_MANAGER',
+    path: '/user',
+    component: Layout,
+    redirect: '/user/management',
+    meta: {
+      title: '用户中心',
+      role: ['admin'],
+    },
+    children: [
+      {
+        name: 'USER',
+        path: 'management',
+        component: () => import('@/views/user/index.vue'),
+        meta: {
+          title: '用户管理',
+          role: ['admin'],
+        },
+      },
+      {
+        name: 'PERMISSION',
+        path: 'permission',
+        component: () => import('@/views/user/UserPermission.vue'),
+        meta: {
+          title: '权限管理',
+          role: ['admin'],
+        },
+      },
+    ],
+  },
+]