权限拦截判断

• 思路

  • 后台根据接口返回id 自己在路由中配置相应的id
  • 包括了按钮的权限
  • 路由树结构的是 重新挂载
  • 按钮根据v-if判断是否渲染

• 我是把方法 写在了vuex中

--store
  --module
    --user.js

• 后台返回的结构
  
• 这里是判断用户权限

  getUserPermission ({ commit, state }, list) {
    return new Promise((resolve, reject) => {
      getUserPermission().then(res => {
        const permissionList = res.data.accountList.map(x => x.permissionCode)
        setCookie('permissionList', JSON.stringify(permissionList))
        state.isGetRole = true
        let target = []
        target = list.filter(x => {
          const index = res.data.menuList.findIndex(y => y.permissionCode === x.meta.id)
          if (index > -1) {
            x.children = x.children.filter(z => {
              const index2 = res.data.menuList[index].permissionCodeResultList.findIndex(e => e.permissionCode === z.meta.id)
              return index2 > -1
            })
            return true
          } else {
            return false
          }
        })
        resolve(target)
      })
    })
  },

• 在文件permission.js中判断路由在跳转之前对路由进行重新挂载

import router, { asyncRouter } from './router'
import store from './store'

router.beforeEach((to, from, next) => {
  // 判断用户需不需要获取权限
  if (store.state.user.isGetRole) {
    // console.log(to.matched.length)
    // 没有匹配到路由
    if (to.matched.length === 0) {
      const consoleURL = process.env.VUE_APP_7_OPEN
      window.location.href = consoleURL + '/403'
    } else {
      next()
    }
  } else {
   // 判断权限
   store.dispatch('user/getAccountInfo').then(e => {
       if (e.accountType.code === 0) {
         // 主账号不需要权限
         store.state.user.isGetRole = true
         router.addRoutes(routers) // 动态添加可访问路由表
         router.options.routes = router.options.routes.concat(routers)
         next({ ...to, replace: true }) // hack方法 确保addRoutes已完成
       } else {
         store.dispatch('user/getUserPermission', asyncRouter).then(res => {
           router.addRoutes(res) // 动态添加可访问路由表
           router.options.routes = router.options.routes.concat(res)
           next({ ...to, replace: true }) // hack方法 确保addRoutes已完成
         })
       }
     })
  }
})

• 控制按钮的

 <el-button v-if="permissionBtn('28')" size="medium">
     <svg-icon icon-class="link" class="svg-link" />导出
 </el-button>

Vue.prototype.permissionBtn = function (id) {
  if (!id) return true
   const permissionList = getCookie('permissionList') ? JSON.parse(getCookie('permissionList')) : []
   if (store.state.user.userInfo.accountType && store.state.user.userInfo.accountType.code === 0) return true // 主账号
   return permissionList.some(x => x === id)
}

路由表

import Vue from 'vue'
import VueRouter from 'vue-router'
import Layout from '@/views/layout/index'

我们是把各个模块路由导出来了的
//  import { homeRoute } from '@/views/home/router' 
//  import { opportunitiesRoute } from '@/views/opportunities/router' 
//   import { customerRoute } from '@/views/customer/router' 

Vue.use(VueRouter)

// mark: true    此路由不受权限管理，慎重填写

export let asyncRouter = [
  {
    path: '/creation',
    name: 'creation',
    meta: { title: '内容创作', icon: 'indite-menu', code: '74' },
    component: Layout,
    children: questionnaire
  },
  {
    path: '/marketing',
    name: 'marketing',
    meta: { title: '营销获客', icon: 'visitors-menu', code: '77' },
    component: Layout,
    // if (process.env.NODE_ENV === 'development' || process.env.NODE_ENV === 'pre') {
    // children: live.concat(activity, exhibition, outlink, ziLiaoRoute)
    children: live.concat(wxMarketing, activity, rootQrcodeRoute, posterRoute, exhibition, outlink, ziLiaoRoute, liveQrCodeRoute)
  },
  {
    path: '/operating',
    name: 'operating',
    meta: { title: '运营中心', icon: 'operations-menu', code: '120' },
    component: Layout,
    children: tagRoute
  },
  {
    path: '/customerManage',
    name: 'customerManage',
    meta: { title: '客户管理', icon: 'customer-menu', code: '136' },
    component: Layout,
    children: opportunitiesRoute.concat(customerRoute, orderFormRoute, officeRoute, commodityRoute, pageSettingRoute)
  },
  {
    path: '/statistics',
    name: 'statistics',
    meta: { title: '统计分析', icon: 'statistics-menu', code: '223' },
    component: Layout,
    children: radarRoute
  },
  {
    path: '/sysSetting',
    name: 'sysSetting',
    meta: { title: '系统设置', icon: 'setting-menu', code: '231' },
    component: Layout,
    children: memberRoute
  }
]
export const routes = [
  {
    path: '/',
    redirect: '/home/index',
    hide: true,
    mark: true
    // full控制2级是否显示
    // hide:true, hide控制一级是否隐藏 不写默认为false
  },
  {
    path: '/home',
    name: 'Home',
    hide: true,
    mark: true,
    meta: { title: '首页', icon: 'home-menu' },
    component: Layout,
    children: [
      {
        path: 'index',
        name: 'index',
        hide: true,
        mark: true,
        meta: { title: '个人首页' },
        component: () => import('@/views/home/page/index.vue')
      }
    ]
  },
  { path: '/403', component: () => import('@/views/403'), hide: true, mark: true }
]
asyncRouter = homeRoute.concat(asyncRouter, [{ path: '*', redirect: '/403', hide: true, mark: true }])

// 解决重复点击导航路由报错

const originalPush = VueRouter.prototype.push
VueRouter.prototype.push = function push (location, onResolve, onReject) {
  if (onResolve || onReject) return originalPush.call(this, location, onResolve, onReject)
  return originalPush.call(this, location).catch(err => err)
}

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  scrollBehavior: () => ({ y: 0 }),
  routes: routes
})

export default router