vue router根据权限菜单判断是否有权限访问

vue yekong

根据用户登录后返回的菜单列表,判断页面是否有权限访问。

import Vue from 'vue'
import Router from 'vue-router'
import { Message } from 'element-ui'

Vue.use(Router)

function getMenu(id) {
  var list = JSON.parse(localStorage.getItem('menuList'))
  var isShow = false
  list.forEach((type) => {
    if (id === type.menuId) {
      isShow = true
    }
  })
  return isShow
}

/* Layout */
import Layout from '@/layout'

export const constantRoutes = [
  {
    path: '/login',
    component: () => import('@/views/login/index'),
    hidden: true
  },

  {
    path: '/',
    component: Layout,
    redirect: '/Freeter',
    children: [{
      path: 'Freeter',
      name: 'Freeter',
      component: () => import('@/views/dashboard/index'),
      meta: { title: 'Freeter', icon: 'dashboard' }
    }]
  },
  {
    path: '/user',
    component: Layout,
    redirect: '/user/userList',
    name: '用户中心',
    meta: { title: '用户中心', icon: 'el-icon-s-help' },
    children: [
      {
        path: 'userList',
        name: 'userList',
        component: () => import('@/views/user/userList'),
        meta: { title: '用户管理', icon: 'table', id: 14 }
      }
    ]
  },
  {
    path: '/order',
    component: Layout,
    redirect: '/user/userList',
    name: '订单中心',
    meta: { title: '订单中心', icon: 'el-icon-s-help' },
    children: [
      {
        path: 'taskOrder',
        name: 'taskOrder',
        component: () => import('@/views/order/taskOrder'),
        meta: { title: '任务订单', icon: 'table', id: 18 }
      }, {
        path: 'pay',
        name: 'pay',
        component: () => import('@/views/order/pay'),
        meta: { title: '支付订单', icon: 'table', id: 19 }
      },
      {
        path: 'arbitrationOrder',
        name: 'arbitrationOrder',
        component: () => import('@/views/order/arbitrationOrder'),
        meta: { title: '仲裁订单', icon: 'tree', id: 17 }
      },
      {
        path: 'memberOrder',
        name: 'memberOrder',
        component: () => import('@/views/order/memberOrder'),
        meta: { title: '会员订单', icon: 'tree' }
      },
      {
        path: 'withdrawOrder',
        name: 'withdrawOrder',
        component: () => import('@/views/order/withdrawOrder'),
        meta: { title: '提现订单', icon: 'tree', id: 22 }
      }
    ]
  },
  {
    path: '/system',
    component: Layout,
    redirect: '/system/accountManage',
    name: '系统管理',
    meta: { title: '系统管理', icon: 'el-icon-s-help', id: 5 },
    children: [
      {
        path: 'accountManage',
        name: 'accountManage',
        component: () => import('@/views/system/accountManage'),
        meta: { title: '子账号管理', icon: 'table', id: 5 }
      }
    ]
  },
  {
    path: '/storeAudit',
    component: Layout,
    redirect: '/storeAudit/storeAudit',
    name: 'Freeter工作者审核',
    meta: { title: 'Freeter工作者审核', icon: 'el-icon-s-help' },
    children: [
      {
        path: 'storeAudit',
        name: 'storeAudit',
        component: () => import('@/views/storeAudit/storeAudit'),
        meta: { title: '工作者审核', icon: 'table', id: 13 }
      },
      {
        path: 'yxstoreAudit',
        name: 'yxstoreAudit',
        component: () => import('@/views/storeAudit/yxstoreAudit'),
        meta: { title: '优选工作者审核', icon: 'table', id: 14 }
      },
      {
        path: 'qystoreAudit',
        name: 'qystoreAudit',
        component: () => import('@/views/storeAudit/qystoreAudit'),
        meta: { title: '企业雇主审核', icon: 'table', id: 12 }
      }
    ]
  },
  {
    path: '/case',
    component: Layout,
    redirect: '/case/list',
    name: '案例库',
    meta: { title: '案例库', icon: 'el-icon-s-help', id: 7 },
    children: [
      {
        path: 'list',
        name: 'list',
        component: () => import('@/views/case/list'),
        meta: { title: '案例库', icon: 'table', id: 7 }
      }, {
        path: 'recommended',
        name: 'recommended',
        component: () => import('@/views/case/recommended'),
        meta: { title: '已推荐列表', icon: 'table', id: 7 }
      }
    ]
  }
]

const createRouter = () => new Router({
  // mode: 'history', // require service support
  scrollBehavior: () => ({ y: 0 }),
  routes: constantRoutes
})

const router = createRouter()

export function resetRouter() {
  const newRouter = createRouter()
  router.matcher = newRouter.matcher // reset router
}

router.beforeEach((to, from, next) => {
  if (to.meta.id) {
    if (getMenu(to.meta.id)) {
      next()
    } else {
      next(from.path)
      Message({
        message: '当前用户没有查看权限',
        type: 'error',
        duration: 2 * 1000
      })
    }
  } else {
    next()
  }
})
export default router

喜欢