双登录页处理

shuishen

2024-01-19 4f8f5e5375b82a5ebc1f67f389b934b3b757f062

 src/router/avue-router.js

@@ -1,8 +1,10 @@
let RouterPlugin = function () {
  this.$router = null;
  this.$store = null;

};

import { getStore } from "@/util/store";

RouterPlugin.install = function (vue, option = {}) {
  this.$router = option.router;
  this.$store = option.store;
@@ -10,53 +12,58 @@

  // 这个的作用是 为了检查出网页链接，因为本项目用到了 iframe
  function isURL(s) {
    if (s.includes('html')) return true;
    return /^http[s]?:\/\/.*/.test(s)
    if (s.includes("html")) return true;
    return /^http[s]?:\/\/.*/.test(s);
  }

  // 将参数处理为参数的形式拼接
  function objToform(obj) {
    let result = [];
    Object.keys(obj).forEach(ele => {
    Object.keys(obj).forEach((ele) => {
      result.push(`${ele}=${obj[ele]}`);
    })
    return result.join('&');
    });
    return result.join("&");
  }

  this.$router.$avueRouter = {
    //全局配置
    $website: this.$store.getters.website,
    group: '',
    group: "",
    meta: {},
    safe: this,
    // 设置标题
    setTitle: (title) => {
      const defaultTitle = this.$vue.$t('title');
      title = title ? `${title}-${defaultTitle}` : defaultTitle;
      //   const defaultTitle = this.$vue.$t("title");

      title = title
        ? `${title}-${getStore({ name: "webTitle" })}`
        : getStore({ name: "webTitle" });
      document.title = title;
    },
    closeTag: (value) => {
      let tag = value || this.$store.getters.tag;
      if (typeof value === 'string') {
        tag = this.$store.getters.tagList.filter(ele => ele.value === value)[0]
      if (typeof value === "string") {
        tag = this.$store.getters.tagList.filter(
          (ele) => ele.value === value
        )[0];
      }
      this.$store.commit('DEL_TAG', tag)
      this.$store.commit("DEL_TAG", tag);
    },
    generateTitle: (title, key) => {
      if (!key) return title;
      const hasKey = this.$vue.$te('route.' + key)
      const hasKey = this.$vue.$te("route." + key);
      if (hasKey) {
        // $t :this method from vue-i18n, inject in @/lang/index.js
        const translatedTitle = this.$vue.$t('route.' + key)
        const translatedTitle = this.$vue.$t("route." + key);

        return translatedTitle
        return translatedTitle;
      }
      return title
      return title;
    },
    //处理路由
    getPath: function (params) {
      let {src} = params;
      let result = src || '/';
      let { src } = params;
      let result = src || "/";
      if (isURL(src)) {
        result = `/myiframe/urlPath?${objToform(params)}`;
      }
@@ -65,12 +72,11 @@
    //正则处理路由
    vaildPath: function (list, path) {
      let result = false;
      list.forEach(ele => {
      list.forEach((ele) => {
        if (new RegExp("^" + ele + ".*", "g").test(path)) {
          result = true
          result = true;
        }

      })
      });
      return result;
    },
    //设置路由值
@@ -85,24 +91,24 @@
    },
    //动态路由
    // 路由是专门的一个接口获取
      /**
       * aMenu: 接受到的动态路由数据 menu的结构外层有父级path 里面有一个childen 记录页面的路由
       * first: 为了区分外界 调用formatRoutes 和 当前文件调用 formatRoutes
      */
    /**
     * aMenu: 接受到的动态路由数据 menu的结构外层有父级path 里面有一个childen 记录页面的路由
     * first: 为了区分外界 调用formatRoutes 和 当前文件调用 formatRoutes
     */
    formatRoutes: function (aMenu = [], first) {
      // window.console.log('aMenu')
      // window.console.log(aMenu)
      const aRouter = []
      const aRouter = [];
      // 获取到全局配置中的 props
      const propsConfig = this.$website.menu.props;
      // 设置 props默认值 作用就是将字段设置成配置的
      const propsDefault = {
        label: propsConfig.label || 'name',
        path: propsConfig.path || 'path',
        icon: propsConfig.icon || 'icon',
        children: propsConfig.children || 'children',
        meta: propsConfig.meta || 'meta',
      }
        label: propsConfig.label || "name",
        path: propsConfig.path || "path",
        icon: propsConfig.icon || "icon",
        children: propsConfig.children || "children",
        meta: propsConfig.meta || "meta",
      };
      // 如果没有权限菜单就结束
      if (aMenu.length === 0) return;
      // 开始处理menu
@@ -113,25 +119,28 @@
        let path = (() => {
            if (first) {
              // 将 '/index' 替换为 ''
              return oMenu[propsDefault.path].replace('/index', '')
              return oMenu[propsDefault.path].replace("/index", "");
            } else {
              return oMenu[propsDefault.path]
              return oMenu[propsDefault.path];
            }
          })(),
          //特殊处理组件 执行完这个 component 也就是精确到具体的文件了  views文件夹下面就是具体的页面代码
          component = 'views' + oMenu.path,
          component = "views" + oMenu.path,
          name = oMenu[propsDefault.label],
          icon = oMenu[propsDefault.icon],
          children = oMenu[propsDefault.children],
          meta = oMenu[propsDefault.meta] || {};
          // meta中 keepalive 的处理
        meta = Object.assign(meta, (function () {
          if (option.keepAlive === true) {
            return {
              keepAlive: true
        // meta中 keepalive 的处理
        meta = Object.assign(
          meta,
          (function () {
            if (option.keepAlive === true) {
              return {
                keepAlive: true,
              };
            }
          }
        })());
          })()
        );
        //是否有子路由
        const isChild = children.length !== 0;
        const oRouter = {
@@ -139,15 +148,15 @@
          component(resolve) {
            // 判断是否为首路由
            if (first) {
              require(['../page/index'], resolve)
              return
              require(["../page/index"], resolve);
              return;
              // 判断是否为多层路由
            } else if (isChild && !first) {
              require(['../page/index/layout'], resolve)
              return
              require(["../page/index/layout"], resolve);
              return;
              // 判断是否为最终的页面视图
            } else {
              require([`../${component}.vue`], resolve)
              require([`../${component}.vue`], resolve);
            }
          },
          name: name,
@@ -155,45 +164,49 @@
          meta: meta,
          redirect: (() => {
            // 第一次进来但是没有子路由的 需要添加redirect
            if (!isChild && first && !isURL(path)) return `${path}/index`
            else return '';
            if (!isChild && first && !isURL(path)) return `${path}/index`;
            else return "";
          })(),
          // 整理子路由的route 配置
          // 处理是否为一级路由
          children: !isChild ? (() => {
            if (first) {
              // 这里的isURL判断，因为这个网站有使用 iframe。所以需要判断是否为网页链接
              if (!isURL(path)) oMenu[propsDefault.path] = `${path}/index`;
              return [{
                component(resolve) {
                  require([`../${component}.vue`], resolve)
                },
                icon: icon,
                name: name,
                meta: meta,
                path: 'index'
              }]
            }
            return [];
          })() : (() => {
            /**
             * 这里是重点，当有子路由的时候 会再去执行 formatRoutes 方法，然后又会有一个新的 aMenu for循环。
             * 最后返回的是一个数组 aRouter 这个数组就会作为 childen的值被 return
            */
            return this.formatRoutes(children, false)
          })()
        }
        aRouter.push(oRouter)
          children: !isChild
            ? (() => {
                if (first) {
                  // 这里的isURL判断，因为这个网站有使用 iframe。所以需要判断是否为网页链接
                  if (!isURL(path)) oMenu[propsDefault.path] = `${path}/index`;
                  return [
                    {
                      component(resolve) {
                        require([`../${component}.vue`], resolve);
                      },
                      icon: icon,
                      name: name,
                      meta: meta,
                      path: "index",
                    },
                  ];
                }
                return [];
              })()
            : (() => {
                /**
                 * 这里是重点，当有子路由的时候 会再去执行 formatRoutes 方法，然后又会有一个新的 aMenu for循环。
                 * 最后返回的是一个数组 aRouter 这个数组就会作为 childen的值被 return
                 */
                return this.formatRoutes(children, false);
              })(),
        };
        aRouter.push(oRouter);
      }
      // for循环结束
      // 这个first 卡的其实就是首路由
      if (first) {
        this.safe.$router.addRoutes(aRouter)
        this.safe.$router.addRoutes(aRouter);
      } else {
        // 这里返回的是子组件
        return aRouter
        return aRouter;
      }
    }
  }
}
    },
  };
};
export default RouterPlugin;