first commit

src/router/guard/index.ts

@@ -0,0 +1,24 @@
+/*
+ * @Author: 田鑫
+ * @Date: 2023-03-05 18:14:17
+ * @LastEditors: 田鑫
+ * @LastEditTime: 2023-03-05 19:21:15
+ * @Description:
+ */
+import type { Router } from 'vue-router';
+import { setRouteEmitter } from '@/utils/route-listener';
+import setupUserLoginInfoGuard from './userLoginInfo';
+import setupPermissionGuard from './permission';
+
+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,29 @@
+/*
+ * @Author: 田鑫
+ * @Date: 2023-03-05 14:46:43
+ * @LastEditors: 田鑫
+ * @LastEditTime: 2023-03-05 15:55:36
+ * @Description: 路由权限守卫
+ */
+import type { Router, RouteRecordNormalized } from 'vue-router';
+import NProgress from 'nprogress'; // progress bar
+import { useAppStore } from '@/stores';
+
+export default function setupPermissionGuard(router: Router) {
+  router.beforeEach(async (to, from, next) => {
+    console.log('access permission router guard');
+    const appStore = useAppStore();
+    //* 菜单是否为服务端渲染
+    if (appStore.menuFromServer) {
+      //* 没有服务端渲染的菜单
+      if(!appStore.appAsyncMenus) {
+        // todo 请求服务端渲染菜单的接口，当前为mock数据
+        await appStore.fetchServerMenuConfig();
+      }
+      next();
+    } else {
+      next();
+    }
+    NProgress.done();
+  });
+}

src/router/guard/userLoginInfo.ts

@@ -0,0 +1,43 @@
+/*
+ * @Author: 田鑫
+ * @Date: 2023-03-05 14:46:43
+ * @LastEditors: 田鑫
+ * @LastEditTime: 2023-03-05 15:59:25
+ * @Description: 路由登录状态守卫
+ */
+import type { Router, LocationQueryRaw } from 'vue-router';
+import NProgress from 'nprogress'; // progress bar
+
+import { isLogin, clearAllLocalStorage } from '@/utils/auth';
+import { useUserStore } from '@/stores/modules/user';
+
+export default function setupUserLoginInfoGuard(router: Router) {
+  router.beforeEach(async (to, from, next) => {
+    console.log('access login info router guard');
+    NProgress.start();
+    if (to.name === 'auth') {
+      next();
+    }
+    const userStore = useUserStore();
+    //* 判断用户是否登录，若登录则放过，进入下一步
+    //* 若无，则清空所有缓存并弹回登录鉴权页
+    if (isLogin()) {
+      if (userStore.role) {
+        next();
+      } else {
+        userStore.getUserInfo();
+        next();
+      }
+    } else {
+      clearAllLocalStorage();
+      // todo 跳转回登录鉴权页，当前为mock路由地址
+      next({
+        name: 'auth',
+        query: {
+          redirect: to.name,
+          ...to.query,
+        } as LocationQueryRaw,
+      });
+    }
+  });
+}