feature[permission]: add v-permission (#653)

src/directive/permission/index.js

@@ -0,0 +1,13 @@
+import permission from './permission'
+
+const install = function(Vue) {
+  Vue.directive('permission', permission)
+}
+
+if (window.Vue) {
+  window['permission'] = permission
+  Vue.use(install); // eslint-disable-line
+}
+
+permission.install = install
+export default permission

src/directive/permission/permission.js

@@ -0,0 +1,23 @@
+
+import store from '@/store'
+
+export default{
+  inserted(el, binding, vnode) {
+    const { value } = binding
+    const roles = store.getters && store.getters.roles
+
+    if (value && value instanceof Array && value.length > 0) {
+      const permissionRoles = value
+
+      const hasPermission = roles.some(role => {
+        return permissionRoles.includes(role)
+      })
+
+      if (!hasPermission) {
+        el.parentNode && el.parentNode.removeChild(el)
+      }
+    } else {
+      throw new Error(`need roles! Like v-permission="['admin','editor']"`)
+    }
+  }
+}

src/lang/en.js

@@ -4,6 +4,8 @@ export default {
     introduction: 'Introduction',
     documentation: 'Documentation',
     permission: 'Permission',
+    pagePermission: 'Page Permission',
+    directivePermission: 'Directive Permission',
     icons: 'Icons',
     components: 'Components',
     componentIndex: 'Introduction',

src/lang/zh.js

@@ -4,6 +4,8 @@ export default {
     introduction: '简述',
     documentation: '文档',
     permission: '权限测试页',
+    pagePermission: '页面权限',
+    directivePermission: '指令权限',
     icons: '图标',
     components: '组件',
     componentIndex: '介绍',

src/router/index.js

@@ -67,16 +67,28 @@ export const asyncRouterMap = [
     path: '/permission',
     component: Layout,
     redirect: '/permission/index',
-    meta: { roles: ['admin'] }, // you can set roles in root nav
+    alwaysShow: true, // will always show the root menu
-    children: [{
-      path: 'index',
-      component: _import('permission/index'),
-      name: 'permission',
     meta: {
       title: 'permission',
       icon: 'lock',
+      roles: ['admin', 'editor'] // you can set roles in root nav
+    },
+    children: [{
+      path: 'page',
+      component: _import('permission/page'),
+      name: 'pagePermission',
+      meta: {
+        title: 'pagePermission',
         roles: ['admin'] // or you can only set roles in sub nav
       }
+    }, {
+      path: 'directive',
+      component: _import('permission/directive'),
+      name: 'directivePermission',
+      meta: {
+        title: 'directivePermission'
+        // if do not set roles, means: this page does not require permission
+      }
     }]
   },
 

src/views/permission/components/SwitchRoles.vue

@@ -0,0 +1,30 @@
+<template>
+  <div>
+    <div style="margin-bottom:15px;">{{$t('permission.roles')}}： {{roles}}</div>
+    {{$t('permission.switchRoles')}}：
+    <el-radio-group v-model="switchRoles">
+      <el-radio-button label="editor"></el-radio-button>
+      <el-radio-button label="admin"></el-radio-button>
+    </el-radio-group>
+  </div>
+</template>
+
+<script>
+export default {
+  computed: {
+    roles() {
+      return this.$store.getters.roles
+    },
+    switchRoles: {
+      get() {
+        return this.roles[0]
+      },
+      set(val) {
+        this.$store.dispatch('ChangeRoles', val).then(() => {
+          this.$emit('change')
+        })
+      }
+    }
+  }
+}
+</script>

src/views/permission/directive.vue

@@ -0,0 +1,56 @@
+<template>
+  <div class="app-container">
+    <switch-roles @change="handleRolesChange" />
+
+    <div :key="key" style="margin-top:30px;">
+      <span v-permission="['admin']" class="permission-alert">
+        Only <el-tag class="permission-tag" size="small">admin</el-tag> can see this
+      </span>
+      <span v-permission="['editor']" class="permission-alert">
+        Only <el-tag class="permission-tag" size="small">editor</el-tag> can see this
+      </span>
+      <span v-permission="[]" class="permission-alert">
+        Both <el-tag class="permission-tag" size="small">admin</el-tag> and <el-tag class="permission-tag" size="small">editor</el-tag> can see this
+      </span>
+    </div>
+  </div>
+</template>
+
+<script>
+import permission from '@/directive/permission/index.js' // 权限判断指令
+import SwitchRoles from './components/SwitchRoles'
+
+export default{
+  name: 'directivePermission',
+  components: { SwitchRoles },
+  directives: { permission },
+  data() {
+    return {
+      key: 1 // 为了能每次切换权限的时候重新初始化指令
+    }
+  },
+  methods: {
+    handleRolesChange() {
+      this.key++
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+.app-container {
+  /deep/ .permission-alert {
+    width: 320px;
+    margin-top: 30px;
+    background-color: #f0f9eb;
+    color: #67c23a;
+    padding: 8px 16px;
+    border-radius: 4px;
+    display: block;
+  }
+  /deep/ .permission-tag{
+    background-color: #ecf5ff;
+  }
+}
+</style>
+

src/views/permission/index.vue

@@ -1,34 +0,0 @@
-<template>
-  <div class="app-container">
-    <div style="margin-bottom:15px;">{{$t('permission.roles')}}： {{roles}}</div>
-    {{$t('permission.switchRoles')}}：
-    <el-radio-group v-model="switchRoles">
-      <el-radio-button label="editor"></el-radio-button>
-    </el-radio-group>
-  </div>
-</template>
-
-<script>
-import { mapGetters } from 'vuex'
-
-export default{
-  name: 'permission',
-  data() {
-    return {
-      switchRoles: ''
-    }
-  },
-  computed: {
-    ...mapGetters([
-      'roles'
-    ])
-  },
-  watch: {
-    switchRoles(val) {
-      this.$store.dispatch('ChangeRoles', val).then(() => {
-        this.$router.push({ path: '/permission/index?' + +new Date() })
-      })
-    }
-  }
-}
-</script>

src/views/permission/page.vue

@@ -0,0 +1,19 @@
+<template>
+  <div class="app-container">
+    <switch-roles @change="handleRolesChange" />
+  </div>
+</template>
+
+<script>
+import SwitchRoles from './components/SwitchRoles'
+
+export default{
+  name: 'pagePermission',
+  components: { SwitchRoles },
+  methods: {
+    handleRolesChange() {
+      this.$router.push({ path: '/permission/index?' + +new Date() })
+    }
+  }
+}
+</script>