vue 权限控制, 菜单权限, 操作权限, 数据权限, 显示权限

Question

菜单权限， 根据不同权限显示不同的菜单
操作权限， 比如有些账号没有新增权限， 有些没有修改或者删除权限
数据权限， 比如统计概况， 普通管理员不能看到公司营业概况，但能看到自己所属区域的概况
显示权限， 比如列表， 运营能看到那一列的签约金额，但市场不能看到签约金额这一列

下面这个问题,已经有人回答了...

https://segmentfault.com/q/10...

只是我不知道他是如何做到的.. login页面单独做 ? 然后再实例化?

Answer 1

main.js

// 定义路由映射
let router = new VueRouter({
  routes: [{
    path: '/login',
    name: 'login',
    component: Login
  }]
})

/* eslint-disable no-new */
let vm = new Vue({
  router,
  template: '<App/>',
  components: { App }
}).$mount('#app')

// 路由权限验证
router.beforeEach((to, from, next) => {
  // 是否登录
  let isLogin = function () {
    return vm.$db.get('token')
  }
  if (to.path === '/login' && !isLogin()) {
    // 没有登录是/login
    return next()
  } else if (!isLogin()) {
    // 没有登录不是/login
    return next({path: '/login'})
  } else {
    // 登录不是/login
    let rule = vm.$db.get('rule')
    let assignRule = Common.assignRouter(rule)
    for (let i in assignRule) {
      if (assignRule[i] instanceof Object) {
        if (assignRule[i].path === to.path) {
          return next()
        }
      }
    }
  }
  return next({path: '/error'})
})

let token = vm.$db.get('token')
if (token) {
  let rule = vm.$db.get('rule')
  // 获取路由
  Common.addRoutes(router, rule)
}

菜单json

    [{
      id: 4,
      parent_id: 2,
      path: '/list',
      name: '示例列表',
      icon: 'el-icon-date',
      islink: 1,
      component: 'Common.List',
      level: 2
    }, {
      id: 3,
      parent_id: 2,
      path: '/form',
      name: '示例表单',
      icon: 'el-icon-date',
      islink: 1,
      component: 'Common.Form',
      level: 2
    }, {
      id: 1,
      name: '首页面板',
      path: '/main',
      icon: 'el-icon-date',
      parent_id: 0,
      level: 1
    }, {
      id: 2,
      name: '示例页面',
      icon: 'el-icon-date',
      parent_id: 0,
      level: 1
    }, {
      id: 10,
      name: '示例表单2',
      path: '/form2',
      icon: 'el-icon-date',
      component: 'Common.Form',
      islink: 1,
      level: 3,
      parent_id: 3
    }]

import List from './sample/list.vue'
import Form from './sample/form.vue'
import Main from './sample/main.vue'
import Error from './common/50x.vue'

export default {
  // 菜单
  Rule: {
    Common: {
      List: List,
      Form: Form,
      Main: Main
    }
  },
  // 默认菜单
  DefaultRule: [{
    path: '/error',
    name: '错误页面',
    component: Error
  }, {
    path: '/main',
    name: '首页面板',
    component: Main
  }]
}

我是这样搞的--

Answer 2

https://github.com/OneWayTech...

Answer 3

这个不错大家看看https://juejin.im/post/5a97e4...

Answer 4

可是用三级分销的逻辑试下