feat: 🚀 订阅功能

src/routers/index.ts

@@ -0,0 +1,97 @@
+import { createRouter, createWebHistory } from "vue-router";
+import { useUserStore } from "@/stores/modules/user";
+import { useAuthStore } from "@/stores/modules/auth";
+import { LOGIN_URL, ROUTER_WHITE_LIST } from "@/config";
+import { initDynamicRouter } from "@/routers/modules/dynamicRouter";
+import { staticRouter, errorRouter } from "@/routers/modules/staticRouter";
+import NProgress from "@/config/nprogress";
+
+/**
+ * @description 📚 路由参数配置简介
+ * @param path ==> 路由菜单访问路径
+ * @param name ==> 路由 name (对应页面组件 name, 可用作 KeepAlive 缓存标识 && 按钮权限筛选)
+ * @param redirect ==> 路由重定向地址
+ * @param component ==> 视图文件路径
+ * @param meta ==> 路由菜单元信息
+ * @param meta.icon ==> 菜单和面包屑对应的图标
+ * @param meta.title ==> 路由标题 (用作 document.title || 菜单的名称)
+ * @param meta.activeMenu ==> 当前路由为详情页时，需要高亮的菜单
+ * @param meta.isLink ==> 路由外链时填写的访问地址
+ * @param meta.hidee ==> 是否在菜单中隐藏 (通常列表详情页需要隐藏)
+ * @param meta.isFull ==> 菜单是否全屏 (示例：数据大屏页面)
+ * @param meta.isAffix ==> 菜单是否固定在标签页中 (首页通常是固定项)
+ * @param meta.isKeepAlive ==> 当前路由是否缓存
+ * */
+const router = createRouter({
+    history: createWebHistory(),
+    routes: [...staticRouter, ...errorRouter],
+    strict: false,
+    scrollBehavior: () => ({ left: 0, top: 0 })
+});
+
+/**
+ * @description 路由拦截 beforeEach
+ * */
+router.beforeEach(async (to, from, next) => {
+    const userStore = useUserStore();
+    const authStore = useAuthStore();
+
+    // 1.NProgress 开始
+    NProgress.start();
+
+    // 2.动态设置标题
+    const title = import.meta.env.VITE_GLOB_APP_TITLE;
+    document.title = to.meta.title ? `${to.meta.title} - ${title}` : title;
+    // 3.判断是访问登陆页，有 Token 就在当前页面，没有 Token 重置路由到登陆页
+    if (to.path.toLocaleLowerCase() === LOGIN_URL) {
+        if (userStore.newUserToken) return next(from.fullPath);
+        resetRouter();
+        return next();
+    }
+
+    // 4.判断访问页面是否在路由白名单地址(静态路由)中，如果存在直接放行
+    if (ROUTER_WHITE_LIST.includes(to.path)) return next();
+
+    // 5.判断是否有 Token，没有重定向到 login 页面
+    if (!userStore.newUserToken) return next({ path: LOGIN_URL, replace: true });
+
+    // 6.如果没有菜单列表，就重新请求菜单列表并添加动态路由
+    if (!authStore.authMenuListGet.length) {
+        await initDynamicRouter();
+        return next({ ...to, replace: true });
+    }
+
+    // 7.存储 routerName 做按钮权限筛选
+    authStore.setRouteName(to.name as string);
+
+    // 8.正常访问页面
+    next();
+});
+
+/**
+ * @description 重置路由
+ * */
+export const resetRouter = () => {
+    const authStore = useAuthStore();
+    authStore.flatMenuListGet.forEach(route => {
+        const { name } = route;
+        if (name && router.hasRoute(name)) router.removeRoute(name);
+    });
+};
+
+/**
+ * @description 路由跳转错误
+ * */
+router.onError(error => {
+    NProgress.done();
+    console.warn("路由错误", error.message);
+});
+
+/**
+ * @description 路由跳转结束
+ * */
+router.afterEach(() => {
+    NProgress.done();
+});
+
+export default router;

src/routers/modules/dynamicRouter.ts

@@ -0,0 +1,52 @@
+import router from "@/routers/index";
+import { LOGIN_URL } from "@/config";
+import { RouteRecordRaw } from "vue-router";
+import { ElNotification } from "element-plus";
+import { useUserStore } from "@/stores/modules/user";
+import { useAuthStore } from "@/stores/modules/auth";
+
+// 引入 views 文件夹下所有 vue 文件
+const modules = import.meta.glob("@/views/**/*.vue");
+
+/**
+ * @description 初始化动态路由
+ */
+export const initDynamicRouter = async () => {
+    const userStore = useUserStore();
+    const authStore = useAuthStore();
+
+    try {
+        // 1.获取菜单列表
+        await authStore.getAuthMenuList();
+        // 2.判断当前用户有没有菜单权限
+        if (!authStore.authMenuListGet.length) {
+            ElNotification({
+                title: "无权限访问",
+                message: "当前账号无任何菜单权限，请联系系统管理员！",
+                type: "warning",
+                duration: 3000
+            });
+            userStore.setToken("");
+            router.replace(LOGIN_URL);
+            return Promise.reject("No permission");
+        }
+
+        // 3.添加动态路由
+        authStore.flatMenuListGet.forEach(item => {
+            item.children && delete item.children;
+            if (item.component && typeof item.component == "string") {
+                item.component = modules["/src/views" + item.component + ".vue"];
+            }
+            if (item.meta.isFull) {
+                router.addRoute(item as unknown as RouteRecordRaw);
+            } else {
+                router.addRoute("layout", item as unknown as RouteRecordRaw);
+            }
+        });
+    } catch (error) {
+        // 当按钮 || 菜单请求出错时，重定向到登陆页
+        userStore.setToken("");
+        router.replace(LOGIN_URL);
+        return Promise.reject(error);
+    }
+};

src/routers/modules/staticRouter.ts

@@ -0,0 +1,63 @@
+import { RouteRecordRaw } from "vue-router";
+import { HOME_URL, LOGIN_URL } from "@/config";
+
+/**
+ * staticRouter (静态路由)
+ */
+export const staticRouter: RouteRecordRaw[] = [
+    {
+        path: "/",
+        redirect: HOME_URL
+    },
+    {
+        path: LOGIN_URL,
+        name: "login",
+        component: () => import("@/views/login/index.vue"),
+        meta: {
+            title: "登录"
+        }
+    },
+    {
+        path: "/layout",
+        name: "layout",
+        component: () => import("@/layouts/index.vue"),
+        // component: () => import("@/layouts/indexAsync.vue"),
+        redirect: HOME_URL,
+        children: []
+    }
+];
+
+/**
+ * errorRouter (错误页面路由)
+ */
+export const errorRouter = [
+    {
+        path: "/403",
+        name: "403",
+        component: () => import("@/components/ErrorMessage/403.vue"),
+        meta: {
+            title: "403页面"
+        }
+    },
+    {
+        path: "/404",
+        name: "404",
+        component: () => import("@/components/ErrorMessage/404.vue"),
+        meta: {
+            title: "404页面"
+        }
+    },
+    {
+        path: "/500",
+        name: "500",
+        component: () => import("@/components/ErrorMessage/500.vue"),
+        meta: {
+            title: "500页面"
+        }
+    },
+    // Resolve refresh page, route warnings
+    {
+        path: "/:pathMatch(.*)*",
+        component: () => import("@/components/ErrorMessage/404.vue")
+    }
+];