add:[permission]: add checkPermission function

Author: PanJiaChen

src/utils/permission.js

@@ -0,0 +1,26 @@
+import store from '@/store'
+
+/**
+ * @param {Array} value
+ * @returns {Boolean}
+ * @example see @/views/permission/directive.vue
+ */
+export default function checkPermission(value) {
+  if (value && value instanceof Array && value.length > 0) {
+    const roles = store.getters && store.getters.roles
+    const permissionRoles = value
+
+    const hasPermission = roles.some(role => {
+      return permissionRoles.includes(role)
+    })
+
+    if (!hasPermission) {
+      return false
+    }
+    return true
+  } else {
+    console.error(`need roles! Like v-permission="['admin','editor']"`)
+    return false
+  }
+}
+

src/views/permission/directive.vue

@@ -16,11 +16,23 @@
         <el-tag class="permission-tag" size="small">editor</el-tag> can see this
       </span>
     </div>
+
+    <div style="margin-top:30px;" :key="'checkPermission'+key">
+      <code>In some cases it is not suitable to use v-permission, such as element Tab component  which can only be achieved by manually setting the v-if.
+        <br> e.g.
+      </code>
+      <el-tabs type="border-card" style="width:500px;">
+        <el-tab-pane v-if="checkPermission(['admin'])" label="Admin">Admin can see this</el-tab-pane>
+        <el-tab-pane v-if="checkPermission(['editor'])" label="Editor">Editor can see this</el-tab-pane>
+        <el-tab-pane v-if="checkPermission(['admin','editor'])" label="Admin-OR-Editor">Both admin or editor can see this</el-tab-pane>
+      </el-tabs>
+    </div>
   </div>
 </template>
 
 <script>
 import permission from '@/directive/permission/index.js' // 权限判断指令
+import checkPermission from '@/utils/permission' // 权限判断函数
 import SwitchRoles from './components/SwitchRoles'
 
 export default{
@@ -33,6 +45,7 @@ export default{
     }
   },
   methods: {
+    checkPermission,
     handleRolesChange() {
       this.key++
     }