merchant-web/src/router/index.js

/**
 * 全站路由配置
 *
 * 建议:
 * 1. 代码中路由统一使用name属性跳转(不使用path属性)
 */
import Vue from "vue";
import Router from "vue-router";
import http from "@/utils/httpRequest";
import { isURL } from "@/utils/validate";
import { clearLoginInfo } 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");
  // 添加动态(菜单)路由
  // 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(({ data }) => {
        const filterTreeData = (data, permissions) => {
          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);
        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
        );
        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;