v-permission逻辑修改

src/directive/permission/permission.js

@@ -2,22 +2,35 @@ import store from '@/store'
 
 function checkPermission(el, binding) {
   const { value } = binding
-  const roles = store.getters && store.getters.roles
+  // const roles = store.getters && store.getters.roles
+  // if (value && value instanceof Array) {
+  //   if (value.length > 0) {
+  //     const permissionRoles = value
 
-  if (value && value instanceof Array) {
-    if (value.length > 0) {
-      const permissionRoles = value
+  //     const hasPermission = roles.some(role => {
+  //       return permissionRoles.includes(role)
+  //     })
 
-      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']"`)
+  // }
+  if (value && value.length > 0) {
+    const permissions = store.getters && store.getters.permissions
+    const permissionButton = value
 
-      if (!hasPermission) {
-        el.parentNode && el.parentNode.removeChild(el)
-      }
+    const hasPermission = permissions.length > 0 && permissions.some(permission => {
+      return permission === permissionButton
+    })
+    if (!hasPermission) {
+      el.parentNode && el.parentNode.removeChild(el)
     }
   } else {
-    throw new Error(`need roles! Like v-permission="['admin','editor']"`)
+    console.error(`need permissions! Like v-permission="SysMenuList:edit"`)
+    return false
   }
 }
 

src/store/getters.js

@@ -9,6 +9,7 @@ const getters = {
   username: state => state.user.username,
   userId: state => state.user.userId,
   roles: state => state.user.roles,
+  permissions: state => state.user.permissions,
   roleDesc: state => state.user.roleDesc,
   fullName: state => state.user.fullName,
   phone: state => state.user.phone,

src/store/modules/user.js

@@ -106,6 +106,7 @@ const actions = {
         .then(() => {
           commit('SET_TOKEN', '')
           commit('SET_ROLES', [])
+          commit('SET_PERMISSIONS', [])
           removeToken()
           resetRouter()
 

src/utils/permission.js

@@ -1,21 +1,33 @@
 import store from '@/store'
 
 /**
- * @param {Array} value
+ * @param {String} 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
+  // 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)
+  //   const hasPermission = roles.some(role => {
+  //     return permissionRoles.includes(role)
+  //   })
+  //   return hasPermission
+  // } else {
+  //   console.error(`need roles! Like v-permission="['admin','editor']"`)
+  //   return false
+  // }
+  if (value && value.length > 0) {
+    const permissions = store.getters && store.getters.permissions
+    const permissionButton = value
+
+    const hasPermission = permissions.length > 0 && permissions.some(permission => {
+      return permission === permissionButton
     })
     return hasPermission
   } else {
-    console.error(`need roles! Like v-permission="['admin','editor']"`)
+    console.error(`need permissions! Like v-permission="SysMenuList:edit"`)
     return false
   }
 }

src/views/sys/menus/list.vue

@@ -5,7 +5,7 @@
       <el-select v-model="listQuery.status" style="width: 140px" class="filter-item" @change="handleFilter">
         <el-option v-for="item in statusOptions" :key="item.key" :label="item.label" :value="item.key" />
       </el-select>
-      <el-button class="filter-item" style="margin-left: 10px;" type="primary" icon="el-icon-edit" @click="handleCreate">
+      <el-button v-if="checkPermission('SysMenuList:edit')" class="filter-item" style="margin-left: 10px;" type="primary" icon="el-icon-edit" @click="handleCreate">
         添加菜单
       </el-button>
     </div>
@@ -41,14 +41,14 @@
       <el-table-column label="设置" width="250" align="center">
         <template slot-scope="{row}">
           <el-button plain size="mini" :disabled="row.childCount | disableNextLevel" @click="handleShowNextLevel(row)">查看子菜单</el-button>
-          <el-button plain size="mini" @click="handleCreateNextLevel(row)">添加子菜单</el-button>
+          <el-button v-if="checkPermission('SysMenuList:edit')" plain size="mini" @click="handleCreateNextLevel(row)">添加子菜单</el-button>
         </template>
       </el-table-column>
       <el-table-column label="操作" width="150" align="center">
         <template slot-scope="{row}">
-          <el-button size="mini" type="primary" @click="handleUpdate(row)">编辑
+          <el-button v-if="checkPermission('SysMenuList:edit')" size="mini" type="primary" @click="handleUpdate(row)">编辑
           </el-button>
-          <el-button size="mini" type="danger" @click="handleDelete(row)">删除
+          <el-button v-permission="'SysMenuList:delete'" size="mini" type="danger" @click="handleDelete(row)">删除
           </el-button>
         </template>
       </el-table-column>
@@ -62,8 +62,12 @@
 <script>
 import { fetchList, deleteMenu, updateSelective } from '@/api/sys/menu'
 import Pagination from '@/components/Pagination'
+import checkPermission from '@/utils/permission' // 权限判断函数
+// 当然你也可以为了方便使用，将它注册到全局
+import permission from '@/directive/permission/index.js' // 权限判断指令
 export default {
   name: 'SysMenuList',
+  directives: { permission },
   components: { Pagination },
   filters: {
     disableNextLevel(value) {
@@ -105,6 +109,7 @@ export default {
     this.getList()
   },
   methods: {
+    checkPermission,
     isElementIcon(value) {
       return value && value.substr(0, 7) === 'el-icon'
     },