vue动态路由

import publicJS from "@/untils/public";
import api from '@/api/api';
import { routes, mainMenu } from '@/router/routes'
import body from '@/components/body'
import error from '@/components/404.vue'
import $ls from '@/untils/localStorageUtil'

//根据后端菜单配置获取路由
//@author visy.wang
//注意: 目前只能处理最多两个层级
var getRouterByMenu = function (menu) {
  if (!menu) {//菜单不存在->路由也不存在
    return null;
  }

  let viewPath = menu.menuUrl;
  if (viewPath == null || !(viewPath + '').trim()) {
    viewPath = 'default';
  }
  const router = (menu.menuLevel == 1) ? { //第一层路由
    path: menu.menuPath,
    name: menu.menuName,
    meta: {
      isLink: true,
      role: menu.menuCode,
      cachePath: menu.menuPath,
      hidden: !!menu.hidden,
    },
    iconCls: menu.menuIcon || 'dashboard',
    component: body,
  } : {
      path: menu.menuPath,
      name: menu.menuName,
      meta: {
        role: menu.menuCode,
        cachePath: menu.menuPath,
        hidden: !!menu.hidden,
      },
      isParent: true,
      component: resolve => { require([`@/views/${viewPath}.vue`], resolve) },
    }

  const subMenuList = menu['sysMenuVoList'];//子菜单列表
  if (subMenuList && subMenuList.length) {
    router.children = [];
    for (let subMenu of subMenuList) {
      router.children.push(getRouterByMenu(subMenu));
    }
  }

  return router;
};

//404页面,应该放到最后面,匹配不到的所有链接都会跳转至该页面
const page404 = {
  path: '*',
  name: '404',
  component: error,
  meta: {
    role: '000',
    hidden: true
  }
};

//保存按钮权限
function saveBtnAuth(menuList) {
  const menus = menuList ? menuList : $ls.get($ls.KEYS.MENU_LIST), btnAuth = {};
  getBtnAuthByMenus(menus, btnAuth);
  $ls.set($ls.KEYS.BTN_AUTH, btnAuth);
}

//提取菜单按钮权限
var getBtnAuthByMenus = function (menus, btnAuth) {
  if (!menus || !menus.length) {
    return;
  }
  for (let menu of menus) {
    btnAuth[menu.menuCode] = menu.sysButtonVoList || [];
    getBtnAuthByMenus(menu.sysMenuVoList, btnAuth);
  }
}

const perm = {
  state: {
    routers: routes,
    addRouters: [],
    perms: false,//判断是否刷新过页面,
    permsList: null
  },
  mutations: {
    SET_ROUTERS: (state, obj) => {
      state.routers = routes.concat(obj.asRouters);//设置路由表
      state.addRouters = obj.asRouters;//动态路由表
      state.perms = true;//登录状态
      state.permsList = obj.permsList;//权限字符串
    },
    CLEAR_ROUTERS: (state) => {
      state.routers = routes;
      state.addRouters = [];
      state.perms = false;
      state.permsList = null;
      $ls.remove([
        $ls.KEYS.TOKEN_ID,
        $ls.KEYS.MENU_LIST,
        $ls.KEYS.WAREHOUSE_LIST,
        'userName',
        'nickName',
        'warehouse'
      ]);
      sessionStorage.removeItem("tagView");
      window.location.reload();//此处退出vuex状态不刷新,目前发现重载页面可以处理。。
    }
  },
  actions: {
    setRouters({ dispatch, commit, state }, menuList) {

      saveBtnAuth(menuList);//保存按钮权限

      if (!menuList) {
        menuList = $ls.get($ls.KEYS.MENU_LIST);
        if (!menuList) {
          dispatch("loginOut")
        }
      }
      return new Promise((resolve, reject) => {//动态加载路由权限
        let asRouters = [];
        if (menuList) {
          for (let menu of menuList) {
            asRouters.push(getRouterByMenu(menu))
          }
        }
        asRouters.push(page404);//404页面追加

        commit('SET_ROUTERS', {
          asRouters: asRouters,
          permsList: []
        });
        resolve(true);
      });
    },
    loginOut({ commit }) {
      return new Promise((resolve, reject) => {
        publicJS.getApi(api.userLogout).then(res => {
          if (res.result) {
            commit('CLEAR_ROUTERS');//清除登陆数据;
          }
          resolve(res);
        }).catch(error => {
          commit('CLEAR_ROUTERS');//清除登陆数据;
          reject(error);
        })
      })
    }
  }


}

export default perm
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值