FE_occupationlab_server/src/router/index.js

import Vue from "vue";
import Router from "vue-router";
import routes from "./routes";
import Setting from "@/setting";
import { get } from "@/plugins/requests/index.js";
import api from "@/api";
import util from "@/libs/util";
import BasicLayout from "@/layouts/home";
Vue.use(Router);
const createRouter = () => new Router({
    mode: Setting.routerMode,
    base: process.env.BASE_URL,
    scrollBehavior: () => ({ y: 0 }),
    routes
});

export function resetRouter() {
    const newRouter = createRouter();
    router.matcher = newRouter.matcher;
}

let router = createRouter();


export default router;


/**
 * 错误页面
 */
const errorPage = [
    {
        path: "/403",
        name: "403",
        meta: {
            title: "403"
        },
        component: () => import("@/pages/exception/error/403")
    },
    {
        path: "*",
        name: "404",
        meta: {
            title: "404"
        },
        component: () => import("@/pages/exception/error/404")
    }
];

// 处理路由权限的方法
function getPermission() {
    sessionStorage.setItem("handelPermission", true);// 记录已处理权限
    get(`${api.getUserRolesPermissionMenu}?platformId=${Setting.platformId}`).then(res => {
        // 取得路由的值，使用addRouter添加进路由里
        // 该项目的路由实际上做了两层处理，一层指向了默认的路由，对应模块，用于基础布局的nav，下面一层才是实际上的路由跳转,
        // 所以需要默认进行赋值，实际操作时根据path去禁用掉对应的nav即可。
        const arr = ['achievement','assessment','course',"evaluation",'information','match','project','setting','student', 'station','system'];
        let permissionRouters = []; // 最后处理好的路由数组

        let data = res.permissionMenu[0].children;
        if (data.length > 0) {
            data.forEach(e => {
                // 第一级路由,需要根据匹配到的path，塞进对应的路由children里
                let str = e.path.split("/")[1];
                let index = arr.indexOf(str);
                if (index !== -1) {
                    let obj = {
                        path: e.path,
                        name: arr[index] + "-list",
                        component: () => import(`@/pages${e.path}`),
                        meta: { title: e.name, btn: [] },
                        children: []
                    };
                    let meta = [];
                    let children = [];
                    // 第二级是按钮级数据，一级归属当前页的同级页面，实际上一共就一级路由
                    if (e.children && e.children.length > 0) {
                        e.children.forEach(i => {
                            // 避免重复生成路由
                            if (i.path && permissionRouters[index] && !permissionRouters[index].children.some(e => i.path === e.path)) {
                                let obj = {
                                    path: i.path,
                                    name: arr[index] + "-" + i.path.split("/").pop(),
                                    component: () => import(`@/pages${i.path}`),
                                    meta: { title: i.name, btn: [] },
                                    children: []
                                };
                                // 没找到第一级就生成一个
                                if (!permissionRouters.some(e => e.path === `/${str}`)) {
                                    let one = {
                                        path: "/" + arr[index],
                                        name: arr[index],
                                        redirect: {
                                            name: `${arr[index]}-list`
                                        },
                                        component: BasicLayout,
                                        children: []// 传来的路由实际上传入对应的children中
                                    };
                                    one.children.push(obj);
                                    permissionRouters.push(one);
                                } else {
                                    // 找到第一级,判断没有重复地址直接塞进去
                                    let nowIndex = permissionRouters.findIndex(e => {
                                        return e.path === `/${str}`;
                                    });
                                    if (nowIndex != -1 && permissionRouters[nowIndex] && !permissionRouters[nowIndex].children.some(e => e.path === obj.path)) {
                                        permissionRouters[nowIndex].children.push(obj);
                                    }
                                }
                                // permissionRouters.push(obj) // path是页面,要塞入上一级同级里，需要单独push进去生成路由
                                meta.push(i.name);
                            } else {
                                meta.push(i.name);
                            }

                            if (i.children && i.children.length) {
                                i.children.forEach(j => {
                                    if (j.path && permissionRouters[index] && !permissionRouters[index].children.some(e => j.path === e.path)) {
                                        // console.log(j.path,'当前三级路由的路径')
                                        let obj = {
                                            path: j.path,
                                            name: arr[index] + "-" + j.path.split("/").pop(),
                                            component: () => import(`@/pages${j.path}`),
                                            meta: { title: j.name, btn: [] },
                                            children: []
                                        };
                                        // 没找到第一级就生成一个
                                        if (!permissionRouters.some(e => e.path === `/${str}`)) {
                                            let one = {
                                                path: "/" + arr[index],
                                                name: arr[index],
                                                redirect: {
                                                    name: `${arr[index]}-list`
                                                },
                                                component: BasicLayout,
                                                children: []// 传来的路由实际上传入对应的children中
                                            };
                                            one.children.push(obj);
                                            permissionRouters.push(one);
                                        } else {
                                            // 找到第一级,判断没有重复地址直接塞进去
                                            let nowIndex = permissionRouters.findIndex(e => {
                                                return e.path === `/${str}`;
                                            });
                                            if (nowIndex != -1 && permissionRouters[nowIndex] && !permissionRouters[nowIndex].children.some(e => e.path === obj.path)) {
                                                permissionRouters[nowIndex].children.push(obj);
                                            }
                                        }
                                        // permissionRouters.push(obj) // path是页面,要塞入上一级同级里，需要单独push进去生成路由
                                        meta.push(i.name+"-"+j.name);
                                    } else {
                                        meta.push(i.name+"-"+j.name);
                                    }

                                    if (j.children && j.children.length) {
                                        j.children.forEach(k => {
                                            if (k.path && permissionRouters[index] && !permissionRouters[index].children.some(e => k.path === e.path)) {
                                                // console.log(j.path,'当前四级路由的路径')
                                                let obj = {
                                                    path: k.path,
                                                    name: arr[index] + "-" + k.path.split("/").pop(),
                                                    component: () => import(`@/pages${k.path}`),
                                                    meta: { title: k.name, btn: [] },
                                                    children: []
                                                };
                                                // 没找到第一级就生成一个
                                                if (!permissionRouters.some(e => e.path === `/${str}`)) {
                                                    let one = {
                                                        path: "/" + arr[index],
                                                        name: arr[index],
                                                        redirect: {
                                                            name: `${arr[index]}-list`
                                                        },
                                                        component: BasicLayout,
                                                        children: []// 传来的路由实际上传入对应的children中
                                                    };
                                                    one.children.push(obj);
                                                    permissionRouters.push(one);
                                                } else {
                                                    // 找到第一级,判断没有重复地址直接塞进去
                                                    let nowIndex = permissionRouters.findIndex(e => {
                                                        return e.path === `/${str}`;
                                                    });
                                                    if (nowIndex != -1 && permissionRouters[nowIndex] && !permissionRouters[nowIndex].children.some(e => e.path === obj.path)) {
                                                        permissionRouters[nowIndex].children.push(obj);
                                                    }
                                                }
                                                // permissionRouters.push(obj) // path是页面,要塞入上一级同级里，需要单独push进去生成路由
                                                meta.push(j.name+"-"+k.name);
                                            } else {
                                                meta.push(j.name+"-"+k.name);
                                            }
                                        })
                                    }
                                })
                            }
                        });
                    }
                    obj.meta.btn = meta;
                    obj.children = children;
                    // 处理好的路由，需要进行一次匹配,arr中必然存在对应的路由，所以在此处才生成第一级路由，免得额外判断是否有children
                    if (permissionRouters.length === 0 || !permissionRouters.some(e => e.path === `/${str}`)) {
                        // 生成第一级
                        let one = {
                            path: "/" + arr[index],
                            name: arr[index],
                            redirect: {
                                name: `${arr[index]}-list`
                            },
                            component: BasicLayout,
                            children: []// 传来的路由实际上传入对应的children中
                        };
                        one.children.push(obj);
                        permissionRouters.push(one);
                        // console.log(one,'当前的第一级别',obj,'第二级别')
                    } else {
                        // 找到第一级直接塞进去
                        let nowIndex = permissionRouters.findIndex(e => {
                            return e.path === `/${str}`;
                        });
                        if (nowIndex != -1) {
                            permissionRouters[nowIndex].children.push(obj);
                        }
                    }
                }
            });
            console.log(permissionRouters, "处理好的");
            const station = permissionRouters.findIndex(e => e.name === 'station')
            if (station !== -1) {
                permissionRouters[station].children.push({
                    name: `stationPreview`,
                    path: `/station/preview`,
                    component: () => import("@/pages/station/preview"),
                    meta: { title: "实验台" }
                })
            }
            const assessment = permissionRouters.findIndex(e => e.name === 'assessment')
            if (assessment !== -1) {
                permissionRouters[assessment].children.push({
                    name: `assessment-add`,
                    path: `/assessment/add`,
                    component: () => import("@/pages/assessment/add"),
                    meta: { title: "创建考核" }
                })
            }
            const notice = permissionRouters.findIndex(e => e.name === 'match')
            if (notice !== -1) {
              const match = [
                {
                  name: `noticeDetail`,
                  path: `/match/noticeDetail`,
                  component: () => import("@/pages/match/manage/noticeDetail"),
                  meta: { title: "通知公告" }
                }
              ]
                permissionRouters[notice].children.push(...match)
            }
            // 把处理完成的路由，add到router里
            // 记录一下路由的名称，用于nav
            let nav = data.map(e => e.path);
            router.app.$options.store.commit("routers", nav);
            let redirect = [{
                path: "/index",
                redirect: station !== -1 ? '/station' : permissionRouters[0].path
            }];
            router.addRoutes(redirect);
            router.addRoutes(permissionRouters);
            router.addRoutes(errorPage);
        }

    });
}

// 权限
router.beforeEach(function(to, from, next) {
    // console.log(router.app.$options.store.commit('routers'),'router.app.$options.store')
    document.title = Setting.titleSuffix;
    if (to.path == "/login") {
        localStorage.removeItem(Setting.tokenKey);
        sessionStorage.removeItem("handelPermission");
    }
    // console.log(util.local.get(Setting.tokenKey),'token')
    // console.log(sessionStorage.getItem('handelPermission'),'保存的是否处理')
    if (util.local.get(Setting.tokenKey)) {
        if (!sessionStorage.getItem("handelPermission")) {// 是否已处理权限
            getPermission();
        }
    } else {
        if (to.path !== "/login" && to.path !== '/redirect') {
            next({
                path: "/login",
                query: { redirect: to.path }
            })
        }
    }
    // 根据路由元信息设置文档标题
    // window.document.title = to.meta.title ? to.meta.title : "";
    window.document.title = "教师管理端"
    next();

});