297 lines
9.2 KiB
JavaScript
297 lines
9.2 KiB
JavaScript
/**
|
||
* 全站路由配置
|
||
*
|
||
* 建议:
|
||
* 1. 代码中路由统一使用name属性跳转(不使用path属性)
|
||
*/
|
||
import Vue from "vue";
|
||
import Router from "vue-router";
|
||
import http from "@/utils/httpRequest";
|
||
import { isURL } from "@/utils/validate";
|
||
import { clearLoginInfo, getMenu } from "@/utils";
|
||
import FULL_ROUTERS from "./full-routers";
|
||
import $api from "@/api/index.js";
|
||
import store from "@/store";
|
||
import { Loading } from "element-ui";
|
||
|
||
Vue.use(Router);
|
||
|
||
// 开发环境不使用懒加载, 因为懒加载页面太多的话会造成webpack热更新太慢, 所以只有生产环境使用懒加载
|
||
const _import = require("./import-" + process.env.NODE_ENV);
|
||
|
||
// 全局路由(无需嵌套上左右整体布局)
|
||
const globalRoutes = [
|
||
{
|
||
path: "/404",
|
||
component: _import("common/404"),
|
||
name: "404",
|
||
meta: { title: "404未找到" },
|
||
},
|
||
{
|
||
path: "/login",
|
||
component: _import("common/login"),
|
||
name: "login",
|
||
meta: { title: "登录" },
|
||
},
|
||
//test用，会员管理
|
||
];
|
||
|
||
// 主入口路由(需嵌套上左右整体布局)
|
||
const mainRoutes = {
|
||
path: "/",
|
||
component: _import("main"),
|
||
name: "main",
|
||
redirect: { name: "home" },
|
||
meta: { title: "主入口整体布局" },
|
||
children: [
|
||
// 通过meta对象设置路由展示方式
|
||
// 1. isTab: 是否通过tab展示内容, true: 是, false: 否
|
||
// 2. iframeUrl: 是否通过iframe嵌套展示内容, '以http[s]://开头': 是, '': 否
|
||
// 提示: 如需要通过iframe嵌套展示内容, 但不通过tab打开, 请自行创建组件使用iframe处理!
|
||
{
|
||
path: "/home",
|
||
component: _import("common/home"),
|
||
name: "home",
|
||
meta: { title: "首页" },
|
||
},
|
||
{
|
||
path: "/theme",
|
||
component: _import("common/theme"),
|
||
name: "theme",
|
||
meta: { title: "主题" },
|
||
},
|
||
{
|
||
path: "/demo-echarts",
|
||
component: _import("demo/echarts"),
|
||
name: "demo-echarts",
|
||
meta: { title: "demo-echarts", isTab: true },
|
||
},
|
||
],
|
||
beforeEnter(to, from, next) {
|
||
let token = Vue.cookie.get("token");
|
||
if (!token || !/\S/.test(token)) {
|
||
clearLoginInfo();
|
||
next({ name: "login" });
|
||
}
|
||
next();
|
||
},
|
||
};
|
||
|
||
const router = new Router({
|
||
mode: "hash",
|
||
// mode:"history",
|
||
scrollBehavior: () => ({ y: 0 }),
|
||
isAddDynamicMenuRoutes: false, // 是否已经添加动态(菜单)路由
|
||
routes: globalRoutes.concat(mainRoutes),
|
||
});
|
||
|
||
router.beforeEach((to, from, next) => {
|
||
console.log("beforeEach", to);
|
||
// 添加动态(菜单)路由
|
||
// 1. 已经添加 or 全局路由, 直接访问
|
||
// 2. 获取菜单列表, 添加并保存本地存储
|
||
if (
|
||
router.options.isAddDynamicMenuRoutes ||
|
||
fnCurrentRouteType(to, globalRoutes) === "global"
|
||
) {
|
||
next();
|
||
} else {
|
||
let loadingInstance = Loading.service({
|
||
text: "正在初始化中...",
|
||
background: "rgba(255,255,255,0.7)",
|
||
});
|
||
$api
|
||
.getUserInfo()
|
||
.then(async ({ data }) => {
|
||
let permissionsData = getMenu(data.data.role);
|
||
if (permissionsData === null) {
|
||
let res = await $api.role.getRoleList({ roleId: data.data.role });
|
||
permissionsData = res.data.data;
|
||
}
|
||
const filterTreeData = (data, permissions) => {
|
||
console.log(data);
|
||
|
||
// return data; //临时性返回所有菜单方便调试
|
||
return data.reduce((filtered, node) => {
|
||
// 如果节点的权限在权限数组中
|
||
if (permissions.includes(node.url)) {
|
||
// 递归过滤子节点
|
||
const list = filterTreeData(node.list || [], permissions);
|
||
// 创建一个新的节点，包含过滤后的子节点
|
||
filtered.push({
|
||
...node,
|
||
list,
|
||
});
|
||
}
|
||
return filtered;
|
||
}, []);
|
||
};
|
||
console.log(data, "用户信息");
|
||
sessionStorage.setItem("role", JSON.stringify(data.data.role));
|
||
if (data.data.markets?.length > 0) {
|
||
// 存在多个市场
|
||
$api.mer_admin
|
||
.storeList({ marketId: data.data.markets[0].marketId })
|
||
.then((res) => {
|
||
store.commit("userData/setState", {
|
||
isMerchant: true,
|
||
marketList: data.data.markets,
|
||
storeList: res.data.data,
|
||
marketId: data.data.markets[0].marketId,
|
||
shopId: res.data.data[0].shopId,
|
||
});
|
||
});
|
||
console.log(data.data.markets);
|
||
} else if (data.data.shopId) {
|
||
// 存在单个店铺
|
||
store.commit("userData/setState", {
|
||
isMerchant: true,
|
||
marketList: [],
|
||
storeList: [],
|
||
marketId: data.data.marketId,
|
||
shopId: data.data.shopId,
|
||
});
|
||
} else {
|
||
// 不存在店铺
|
||
store.commit("userData/setState", {
|
||
isMerchant: false,
|
||
marketList: [],
|
||
storeList: [],
|
||
marketId: "",
|
||
shopId: "",
|
||
});
|
||
}
|
||
sessionStorage.setItem("userInfo", JSON.stringify(data.data));
|
||
sessionStorage.setItem(
|
||
"permissions",
|
||
JSON.stringify(data.data.permissions || "[]")
|
||
);
|
||
//添加全量菜单,根据权限进行过滤
|
||
// let _menu = filterTreeData(
|
||
// FULL_ROUTERS.menuList,
|
||
// data.data.permissions
|
||
// );
|
||
console.log(permissionsData, "11111111111111111111111111111");
|
||
|
||
let _menu = filterTreeData(FULL_ROUTERS.menuList, permissionsData);
|
||
fnAddDynamicMenuRoutes(_menu);
|
||
sessionStorage.setItem("menuList", JSON.stringify(_menu));
|
||
router.options.isAddDynamicMenuRoutes = true;
|
||
next({ ...to, replace: true });
|
||
})
|
||
.catch((e) => {
|
||
sessionStorage.setItem("menuList", "[]");
|
||
sessionStorage.setItem("permissions", "[]");
|
||
console.log(
|
||
`%c${e} 请求菜单列表和权限失败，跳转至登录页！！`,
|
||
"color:blue"
|
||
);
|
||
router.push({ name: "login" });
|
||
next();
|
||
})
|
||
.finally(() => {
|
||
loadingInstance.close();
|
||
});
|
||
// http({
|
||
// url: '/sys/menu/nav',
|
||
// method: 'get',
|
||
// params: http.adornParams()
|
||
// }).then(({ data }) => {
|
||
// if (data && data.code === 0) {
|
||
// // router.options.isAddDynamicMenuRoutes = true
|
||
// // sessionStorage.setItem('permissions', JSON.stringify(data.permissions || '[]'))
|
||
// next({ ...to, replace: true })
|
||
// } else {
|
||
// // sessionStorage.setItem('menuList', '[]')
|
||
// // sessionStorage.setItem('permissions', '[]')
|
||
// next()
|
||
// }
|
||
// }).catch((e) => {
|
||
// console.log(`%c${e} 请求菜单列表和权限失败，跳转至登录页！！`, 'color:blue')
|
||
// router.push({ name: 'login' })
|
||
// })
|
||
}
|
||
});
|
||
|
||
/**
|
||
* 判断当前路由类型, global: 全局路由, main: 主入口路由
|
||
* @param {*} route 当前路由
|
||
*/
|
||
function fnCurrentRouteType(route, globalRoutes = []) {
|
||
var temp = [];
|
||
for (var i = 0; i < globalRoutes.length; i++) {
|
||
if (route.path === globalRoutes[i].path) {
|
||
return "global";
|
||
} else if (
|
||
globalRoutes[i].children &&
|
||
globalRoutes[i].children.length >= 1
|
||
) {
|
||
temp = temp.concat(globalRoutes[i].children);
|
||
}
|
||
}
|
||
return temp.length >= 1 ? fnCurrentRouteType(route, temp) : "main";
|
||
}
|
||
|
||
/**
|
||
* 添加动态(菜单)路由
|
||
* @param {*} menuList 菜单列表
|
||
* @param {*} routes 递归创建的动态(菜单)路由
|
||
*/
|
||
function fnAddDynamicMenuRoutes(menuList = [], routes = []) {
|
||
var temp = [];
|
||
for (var i = 0; i < menuList.length; i++) {
|
||
if (menuList[i].list && menuList[i].list.length >= 1) {
|
||
temp = temp.concat(menuList[i].list);
|
||
} else if (menuList[i].url && /\S/.test(menuList[i].url)) {
|
||
menuList[i].url = menuList[i].url.replace(/^\//, "");
|
||
var route = {
|
||
path: menuList[i].url.replace("/", "-"),
|
||
component: null,
|
||
name: menuList[i].url.replace("/", "-"),
|
||
meta: {
|
||
menuId: menuList[i].menuId,
|
||
title: menuList[i].name,
|
||
isDynamic: true,
|
||
isTab: true,
|
||
iframeUrl: "",
|
||
isMicroApp: menuList[i].isMicroApp,
|
||
},
|
||
};
|
||
// url以http[s]://开头, 通过iframe展示,或者启用microApp框架
|
||
if (isURL(menuList[i].url)) {
|
||
route["path"] = `i-${menuList[i].menuId}`;
|
||
route["name"] = `i-${menuList[i].menuId}`;
|
||
route["meta"]["iframeUrl"] = menuList[i].url;
|
||
} else {
|
||
try {
|
||
route["component"] = _import(`modules/${menuList[i].url}`) || null;
|
||
} catch (e) {}
|
||
}
|
||
routes.push(route);
|
||
}
|
||
}
|
||
if (temp.length >= 1) {
|
||
fnAddDynamicMenuRoutes(temp, routes);
|
||
} else {
|
||
mainRoutes.name = "main-dynamic";
|
||
mainRoutes.children = routes;
|
||
router.addRoutes([mainRoutes, { path: "*", redirect: { name: "404" } }]);
|
||
sessionStorage.setItem(
|
||
"dynamicMenuRoutes",
|
||
JSON.stringify(mainRoutes.children || "[]")
|
||
);
|
||
console.log("\n");
|
||
console.log(
|
||
"%c!<-------------------- 动态(菜单)路由 s -------------------->",
|
||
"color:blue"
|
||
);
|
||
console.log(mainRoutes.children);
|
||
console.log(
|
||
"%c!<-------------------- 动态(菜单)路由 e -------------------->",
|
||
"color:blue"
|
||
);
|
||
}
|
||
}
|
||
|
||
export default router;
|