first commit

src/router/index.ts

@@ -0,0 +1,112 @@
+import { createRouter, createWebHashHistory, type RouteRecordRaw } from 'vue-router'
+
+/** 默认布局 */
+const Layout = () => import('@/layout/index.vue')
+
+/** 静态路由 */
+export const constantRoutes: RouteRecordRaw[] = [
+  {
+    path: '/redirect',
+    component: Layout,
+    meta: { hidden: true },
+    children: [
+      {
+        path: '/redirect/:path(.*)',
+        component: () => import('@/views/default/redirect/index.vue')
+      }
+    ]
+  },
+  {
+    path: '/login',
+    component: () => import('@/views/login/index.vue'),
+    meta: { hidden: true }
+  },
+  {
+    path: '/:pathMatch(.*)*',
+    component: () => import('@/views/default/error/404.vue'),
+    meta: { hidden: true }
+  },
+  {
+    path: '/403',
+    component: () => import('@/views/default/error/403.vue'),
+    meta: { hidden: true }
+  },
+  {
+    path: '/',
+    name: 'Home',
+    component: Layout,
+    redirect: '/home',
+    meta: { hidden: false },
+    children: [
+      {
+        path: '/home',
+        component: () => import('@/views/home/index.vue'),
+        name: 'Home',
+        meta: { title: '首页', icon: 'icon-dashboard', affix: true, hidden: false }
+      }
+    ]
+  },
+  {
+    path: '/setting',
+    name: 'Setting',
+    component: Layout,
+    redirect: '/setting/profile',
+    meta: { hidden: true },
+    children: [
+      {
+        path: '/setting',
+        name: 'Setting',
+        component: () => import('@/views/setting/index.vue'),
+        redirect: '',
+        meta: { hidden: true },
+        children: [
+          {
+            path: '/setting/profile',
+            component: () => import('@/views/setting/profile/index.vue'),
+            name: 'Profile',
+            meta: { title: '基本信息', hidden: false }
+          },
+          {
+            path: '/setting/security',
+            component: () => import('@/views/setting/security/index.vue'),
+            name: 'Security',
+            meta: { title: '安全设置', hidden: false }
+          },
+          {
+            path: '/setting/notice',
+            component: () => import('@/views/setting/notice/index.vue'),
+            name: 'Notification',
+            meta: { title: '消息中心', hidden: false }
+          }
+        ]
+      }
+    ]
+  }
+]
+
+const router = createRouter({
+  history: createWebHashHistory(import.meta.env.BASE_URL),
+  routes: constantRoutes,
+  scrollBehavior: () => ({ left: 0, top: 0 })
+})
+
+/**
+ * @description 重置路由
+ * @description 注意：所有动态路由路由必须带有 name 属性，否则可能会不能完全重置干净
+ */
+export function resetRouter() {
+  try {
+    router.getRoutes().forEach((route) => {
+      const { name } = route
+      // console.log('name', name, path)
+      if (name && name !== 'Home') {
+        router.hasRoute(name) && router.removeRoute(name)
+      }
+    })
+  } catch (error) {
+    // 强制刷新浏览器也行，只是交互体验不是很好
+    window.location.reload()
+  }
+}
+
+export default router

src/router/permission.ts

@@ -0,0 +1,57 @@
+import router from '@/router'
+import { useUserStore, useRouteStore } from '@/stores'
+import { getToken } from '@/utils/auth'
+import { isHttp } from '@/utils/validate'
+
+/** 免登录白名单 */
+const whiteList = ['/login', '/register']
+
+/** 是否已经生成过路由表 */
+let hasRouteFlag = false
+export const resetHasRouteFlag = () => {
+  hasRouteFlag = false
+}
+
+router.beforeEach(async (to, from, next) => {
+  const userStore = useUserStore()
+  const routeStore = useRouteStore()
+
+  // 判断该用户是否登录
+  if (getToken()) {
+    if (to.path === '/login') {
+      // 如果已经登录，并准备进入 Login 页面，则重定向到主页
+      next()
+    } else {
+      if (!hasRouteFlag) {
+        try {
+          await userStore.getInfo()
+          const accessRoutes = await routeStore.generateRoutes()
+          accessRoutes.forEach((route) => {
+            if (!isHttp(route.path)) {
+              router.addRoute(route) // 动态添加可访问路由表
+            }
+          })
+          hasRouteFlag = true
+          // 确保添加路由已完成
+          // 设置 replace: true, 因此导航将不会留下历史记录
+          next({ ...to, replace: true })
+        } catch (error: any) {
+          // 过程中发生任何错误，都直接重置 Token，并重定向到登录页面
+          await userStore.logoutCallBack()
+          next(`/login?redirect=${to.path}`)
+        }
+      } else {
+        next()
+      }
+    }
+  } else {
+    // 如果没有 Token
+    if (whiteList.indexOf(to.path) !== -1) {
+      // 如果在免登录的白名单中，则直接进入
+      next()
+    } else {
+      // 其他没有访问权限的页面将被重定向到登录页面
+      next('/login')
+    }
+  }
+})