init

src/router/guards/index.js

@@ -0,0 +1,19 @@
+/**********************************
+ * @Author: Ronnie Zhang
+ * @LastEditor: Ronnie Zhang
+ * @LastEditTime: 2023/12/05 21:24:46
+ * @Email: zclzone@outlook.com
+ * Copyright © 2023 Ronnie Zhang(大脸怪) | https://isme.top
+ **********************************/
+
+import { createPageLoadingGuard } from './page-loading-guard'
+import { createPageTitleGuard } from './page-title-guard'
+import { createPermissionGuard } from './permission-guard'
+import { createTabGuard } from './tab-guard'
+
+export function setupRouterGuards(router) {
+  createPageLoadingGuard(router)
+  createPermissionGuard(router)
+  createPageTitleGuard(router)
+  createTabGuard(router)
+}

src/router/guards/page-loading-guard.js

@@ -0,0 +1,23 @@
+/**********************************
+ * @Author: Ronnie Zhang
+ * @LastEditor: Ronnie Zhang
+ * @LastEditTime: 2023/12/05 21:24:53
+ * @Email: zclzone@outlook.com
+ * Copyright © 2023 Ronnie Zhang(大脸怪) | https://isme.top
+ **********************************/
+
+export function createPageLoadingGuard(router) {
+  router.beforeEach(() => {
+    $loadingBar.start()
+  })
+
+  router.afterEach(() => {
+    setTimeout(() => {
+      $loadingBar.finish()
+    }, 200)
+  })
+
+  router.onError(() => {
+    $loadingBar.error()
+  })
+}

src/router/guards/page-title-guard.js

@@ -0,0 +1,20 @@
+/**********************************
+ * @Author: Ronnie Zhang
+ * @LastEditor: Ronnie Zhang
+ * @LastEditTime: 2023/12/05 21:25:00
+ * @Email: zclzone@outlook.com
+ * Copyright © 2023 Ronnie Zhang(大脸怪) | https://isme.top
+ **********************************/
+
+const baseTitle = import.meta.env.VITE_TITLE
+
+export function createPageTitleGuard(router) {
+  router.afterEach((to) => {
+    const pageTitle = to.meta?.title
+    if (pageTitle) {
+      document.title = `${pageTitle} | ${baseTitle}`
+    } else {
+      document.title = baseTitle
+    }
+  })
+}

src/router/guards/permission-guard.js

@@ -0,0 +1,37 @@
+/**********************************
+ * @Author: Ronnie Zhang
+ * @LastEditor: Ronnie Zhang
+ * @LastEditTime: 2023/12/05 21:25:07
+ * @Email: zclzone@outlook.com
+ * Copyright © 2023 Ronnie Zhang(大脸怪) | https://isme.top
+ **********************************/
+
+import { useAuthStore } from '@/store'
+import api from '@/api'
+
+const WHITE_LIST = ['/login', '/404', '/role-select']
+export function createPermissionGuard(router) {
+  router.beforeEach(async (to) => {
+    const authStore = useAuthStore()
+    const token = authStore.accessToken
+
+    /** 没有token */
+    if (!token) {
+      if (WHITE_LIST.includes(to.path)) return true
+      return { path: 'login', query: { ...to.query, redirect: to.path } }
+    }
+
+    // 有token的情况
+    if (to.path === '/login') return { path: '/' }
+    if (WHITE_LIST.includes(to.path)) return true
+
+    const routes = router.getRoutes()
+    if (routes.find((route) => route.name === to.name)) return true
+
+    // 判断是无权限还是404
+    const { data: hasMenu } = await api.validateMenuPath(to.path)
+    return hasMenu
+      ? { name: '403', query: { path: to.fullPath }, state: { from: 'permission-guard' } }
+      : { name: '404', query: { path: to.fullPath } }
+  })
+}

src/router/guards/tab-guard.js

@@ -0,0 +1,23 @@
+/**********************************
+ * @Author: Ronnie Zhang
+ * @LastEditor: Ronnie Zhang
+ * @LastEditTime: 2023/12/05 21:25:17
+ * @Email: zclzone@outlook.com
+ * Copyright © 2023 Ronnie Zhang(大脸怪) | https://isme.top
+ **********************************/
+
+import { useTabStore } from '@/store'
+
+export const EXCLUDE_TAB = ['/404', '/403', '/login', '/role-select']
+
+export function createTabGuard(router) {
+  router.afterEach((to) => {
+    if (EXCLUDE_TAB.includes(to.path)) return
+    const tabStore = useTabStore()
+    const { name, fullPath: path } = to
+    const title = to.meta?.title
+    const icon = to.meta?.icon
+    const keepAlive = to.meta?.keepAlive
+    tabStore.addTab({ name, path, title, icon, keepAlive })
+  })
+}

src/router/index.js

@@ -0,0 +1,105 @@
+/**********************************
+ * @Author: Ronnie Zhang
+ * @LastEditor: Ronnie Zhang
+ * @LastEditTime: 2023/12/05 21:25:23
+ * @Email: zclzone@outlook.com
+ * Copyright © 2023 Ronnie Zhang(大脸怪) | https://isme.top
+ **********************************/
+
+import { createRouter, createWebHistory, createWebHashHistory } from 'vue-router'
+import { setupRouterGuards } from './guards'
+import { useAuthStore, usePermissionStore, useUserStore } from '@/store'
+
+export const basicRoutes = [
+  {
+    name: 'Login',
+    path: '/login',
+    component: () => import('@/views/login/index.vue'),
+    meta: {
+      title: '登录页',
+      layout: 'empty',
+    },
+  },
+
+  {
+    name: 'Home',
+    path: '/',
+    component: () => import('@/views/home/index.vue'),
+    meta: {
+      title: '首页',
+    },
+  },
+
+  {
+    name: '404',
+    path: '/404',
+    component: () => import('@/views/error-page/404.vue'),
+    meta: {
+      title: '页面飞走了',
+      layout: 'empty',
+    },
+  },
+
+  {
+    name: '403',
+    path: '/403',
+    component: () => import('@/views/error-page/403.vue'),
+    meta: {
+      title: '没有权限',
+      layout: 'empty',
+    },
+  },
+]
+
+export const router = createRouter({
+  history:
+    import.meta.env.VITE_USE_HASH === 'true' ? createWebHashHistory('/') : createWebHistory('/'),
+  routes: basicRoutes,
+  scrollBehavior: () => ({ left: 0, top: 0 }),
+})
+
+export async function setupRouter(app) {
+  try {
+    await initUserAndPermissions()
+  } catch (error) {
+    console.error('🚀 初始化失败', error)
+  }
+  setupRouterGuards(router)
+  app.use(router)
+}
+
+export async function initUserAndPermissions() {
+  const permissionStore = usePermissionStore()
+  const userStore = useUserStore()
+  const authStore = useAuthStore()
+
+  if (!authStore.accessToken) {
+    authStore.toLogin()
+    return
+  }
+  await Promise.all([userStore.getUserInfo(), permissionStore.initPermissions()])
+  permissionStore.accessRoutes.forEach((route) => {
+    !router.hasRoute(route.name) && router.addRoute(route)
+  })
+}
+
+export async function resetRouter() {
+  const basicRouteNames = getRouteNames(basicRoutes)
+  router.getRoutes().forEach((route) => {
+    const name = route.name
+    if (!basicRouteNames.includes(name)) {
+      router.removeRoute(name)
+    }
+  })
+}
+
+export function getRouteNames(routes) {
+  const names = []
+  for (const route of routes) {
+    names.push(route.name)
+    if (route.children?.length) {
+      names.push(...getRouteNames(route.children))
+    }
+  }
+  return names
+}