vue权限

101 阅读3分钟
import Vue from 'vue'
import VueRouter from 'vue-router'
// 在导入进度条
import nprogress from 'nprogress'
//保存到localStorage中
import {
  getLocal
} from '../utils/local'
//获取vuex公共数据
import store from '@/store/index'

//获取有ID路由列表
import {
  routerLists
} from './routerForList'
//获取无ID路由列表
import {
  hasRouterList
} from './hasRouterList'

//获取序列化路由数据方法
import {
  routerListFun,
  routerListStr
} from './Juridiction'
//主页面
import Home from '@/views/home'
Vue.use(VueRouter)

//对权限路由数组进行重小到大排序
function b(c, d) {
  return c - d;
}


//主菜单列表
let routerAlls = [{
  path: '/home',
  component: Home
}]


//点击路由跳转相同地址 解决会有这个报错,
const originalPush = VueRouter.prototype.push;
VueRouter.prototype.push = function push(location) {
  return originalPush.call(this, location).catch(err => err)
};




//存储所有的路由权限列表
const createRouter = () => new VueRouter({

  routes: hasRouterList
})


const router = createRouter();





//重置路由表防止重复提交报错
function resetRouter(params) {
  const newRouter = createRouter()
  //清除之前的路由表
  router.matcher = newRouter.matcher;
  router.addRoutes(params);
}



//-----------------------
//重新加载一次防止刷新变空白页面
//获取从后台返回来的数据
let menuList = store.state.routerData.menuList;

let arr = [];
//将字符串转换为数组
if (typeof menuList == 'string') {
  menuList = menuList.replace('[', '');
  menuList = menuList.replace(']', '');
  arr = menuList.split(',');
}

//将ID转换为数字类型
let dataNum = []
arr.forEach(item => {
  dataNum.push(+item);
})
//重小到大排序
dataNum.sort(b);
//重新赋值给menuList数组
menuList = dataNum;
// 先把路由信息对象字符串化,然后去除component字段 ,再传递给 权限配置表
let routerListString = JSON.stringify(routerLists);
let src = routerListStr(routerListString);
//将对象字符串存储在公共组件
store.commit('routerData/serRouterList', src);
//获取从后台返回过来的数据
let arrList = menuList;
//获取改列表的子路由
routerAlls[0].children = routerListFun(arrList, routerLists);
//根据权限配置表和路由信息对象 获取本用户的菜单列表
let mentParse = JSON.parse(JSON.stringify(src));
let menuListData = routerListFun(arrList, mentParse);
store.commit('routerData/setMents', menuListData);
//存储所有的路由权限列表
resetRouter(routerAlls);

//---------------------

//判断是否登陆,前置导航
router.beforeEach((to, from, next) => {
  //上进度条开始
  nprogress.start()
  //浏览器标题标签
  if (to.meta.title) {
    document.title = '小吧嗒' + to.meta.title
  }
  if (to.path == "/login" || to.path == "/forget" || to.path == '/private') {
    // 如果去的是登录页面直接放行
    window.localStorage.removeItem("userInfo");
    window.localStorage.removeItem('detailUser');
    window.localStorage.removeItem('mentList');
    window.localStorage.removeItem('menuList');
    window.localStorage.removeItem('numData');
    next();

  } else {

    //别的页面要判断是否有登录
    let str = getLocal('userInfo');
    if (str) {
      //登录成功 继续调用权限列表
      //--------------------
      //获取从后台返回来的数据
      let menuList = store.state.routerData.menuList;

      let arr = [];
      //将字符串转换为数组
      if (typeof menuList == 'string') {
        menuList = menuList.replace('[', '');
        menuList = menuList.replace(']', '');
        arr = menuList.split(',');
      }

      //将ID转换为数字类型
      let dataNum = []
      arr.forEach(item => {
        dataNum.push(+item);
      })
      //重小到大排序
      dataNum.sort(b);
      //重新赋值给menuList数组
      menuList = dataNum;
      // 先把路由信息对象字符串化,然后去除component字段 ,再传递给 权限配置表
      let routerListString = JSON.stringify(routerLists);
      let src = routerListStr(routerListString);
      //将对象字符串存储在公共组件
      store.commit('routerData/serRouterList', src);
      //获取从后台返回过来的数据
      let arrList = menuList;
      //获取改列表的子路由
      routerAlls[0].children = routerListFun(arrList, routerLists);
      //根据权限配置表和路由信息对象 获取本用户的菜单列表
      let mentParse = JSON.parse(JSON.stringify(src));
      let menuListData = routerListFun(arrList, mentParse);
      store.commit('routerData/setMents', menuListData);

      //存储所有的列表
      window.localStorage.setItem('routerAlls', JSON.stringify(routerAlls));

      //存储所有的路由权限列表
      resetRouter(routerAlls);
      //--------------------------------------------
      //放行路由
        next();
    } else {

      Vue.prototype.$message.warning('请先登录!');
      // router.push('/login');
      // 下面这句和上面这句都能实现
      next('/login');

    }
  }
})

//后置导航
router.afterEach((to) => {
  // 完成进度条

  setTimeout(() => {
    nprogress.done();
  }, 200);


  // 改变导航菜单的激活项,变成进来后的页面
  let arr = to.path.split('/');
  // 子路由有子嵌套就进行改变
  arr.shift();
  // 只能嵌套一个路由
  if (arr.length === 3) {

    arr.pop();
  }

  let s = '/' + arr.join('/');

  if (to.path == '/order/lookorder' || to.path == '/order/ordersend') {
    s = '/order/orderlist'
  }

  if (to.path == '/home/startpage') {
    s = "/home";
  }
  if (to)
    store.commit('user/changeActive', s)

})


export {
  router
}