• 宣傳官網(wǎng) http://xb.exrick.cn
• 在線Demo http://xboot.exrick.cn
• 開源版Github地址 https://github.com/Exrick/x-boot
• 開發(fā)文檔 https://www.kancloud.cn/exrick/xboot/1009234
• 獲取完整版 http://xpay.exrick.cn/pay?xboot
  
  在這里插入圖片描述

按鈕權限

將用戶操作權限列表存入路由數(shù)據(jù)結(jié)構的meta字段中，注冊全局指令，當點初次渲染時，判斷傳入的參數(shù)是否在當前路由頁面權限列表中，若不存在，則直接刪除該節(jié)點

• 動態(tài)路由JSON數(shù)據(jù)示例

component: "access/access"
icon: "md-lock"
id: "16392767785668608"
level: 2
name: "access_index"
parentId: "16392452747300864"
path: "index"
permTypes: ["add", "edit", "delete"]
title: "權限按鈕測試頁"

• 從后臺讀取菜單數(shù)據(jù)構造路由節(jié)點時將permTypes存入，詳見src/libs/util.js

// 生成路由節(jié)點
util.initRouterNode = function (routers, data) {
    ...
     // 給頁面添加權限
    meta.permTypes = menu.permTypes ? menu.permTypes : null;
    ...
};

• 定義全局命令組件，判斷頁面擁有權限刪除節(jié)點，詳見src/libs/hasPermission.js

const hasPermission = {
    install (Vue, options) {
        Vue.directive('has', {
            inserted (el, binding, vnode) {
                let permTypes = vnode.context.$route.meta.permTypes;
                if (!permTypes.includes(binding.value)) {
                    el.parentNode.removeChild(el);
                }
            }
        });
    }
};

export default hasPermission;

• 全局注冊組件，詳見src/main.js

import  hasPermission  from  '@/libs/hasPermission'

Vue.use(hasPermission);

上述方式的優(yōu)點：每個頁面只處理其擁有的權限，無大量權限數(shù)據(jù)需要判斷
缺點：不在動態(tài)路由中的頁面節(jié)點不受控制，解決方案：見下方使用角色權限

角色權限

原理大致同上，該方式雖然不能細化權限控制，但其優(yōu)點為可全局直接使用，無需配置

• 用戶成功登錄后將其角色信息存入LocalStorage中，詳見src/views/login.vue

this.setStore("roles", roles);

• 定義全局命令組件，判斷頁面擁有權限刪除節(jié)點，詳見src/libs/hasRole.js

import { getStore } from './storage';

const hasRole = {
    install (Vue, options) {
        Vue.directive('hasRole', {
            inserted (el, binding) {
                let roles = getStore("roles");
                if (!roles.includes(binding.value)) {
                    el.parentNode.removeChild(el);
                }
            }
        });
    }
};

export default hasRole;

• 全局注冊組件，詳見src/main.js

import  hasRole  from  '@/libs/hasRole'

Vue.use(hasRole);

擴展

如需使用多個權限為與、或規(guī)則，自行參考下方代碼使用，由于作者沒有用到，有需要的自行加入代碼

// 必須包含列出的所有權限，元素才顯示
export const hasPermission = {
  install (Vue) {
    Vue.directive('hasPermission', {
      bind (el, binding, vnode) {
        let permTypes = vnode.context.$route.meta.permTypes;
        let value = binding.value.split(',')
        let flag = true
        for (let v of value) {
          if (!permTypes.includes(v)) {
            flag = false
          }
        }
        if (!flag) {
            el.parentNode.removeChild(el)
        }
      }
    })
  }
}

// 當不包含列出的權限時，渲染該元素
export const hasNoPermission = {
  install (Vue) {
    Vue.directive('hasNoPermission', {
      bind (el, binding, vnode) {
        let permTypes = vnode.context.$route.meta.permTypes;
        let value = binding.value.split(',')
        let flag = true
        for (let v of value) {
          if (permTypes.includes(v)) {
            flag = false
          }
        }
        if (!flag) {
            el.parentNode.removeChild(el)
        }
      }
    })
  }
}

// 只要包含列出的任意一個權限，元素就會顯示
import { getStore } from './storage';

export const hasAnyPermission = {
  install (Vue) {
    Vue.directive('hasAnyPermission', {
      bind (el, binding, vnode) {
        let permissions = vnode.context.$store.state.account.permissions
        let value = binding.value.split(',')
        let flag = false
        for (let v of value) {
          if (permissions.includes(v)) {
            flag = true
          }
        }
        if (!flag) {
            el.parentNode.removeChild(el)
        }
      }
    })
  }
}

// 必須包含列出的所有角色，元素才顯示
import { getStore } from './storage';

export const hasRole = {
  install (Vue) {
    Vue.directive('hasRole', {
      bind (el, binding, vnode) {
        let roles = getStore("roles");
        let value = binding.value.split(',')
        let flag = true
        for (let v of value) {
          if (!roles.includes(v)) {
            flag = false
          }
        }
        if (!flag) {
            el.parentNode.removeChild(el)
        }
      }
    })
  }
}

// 只要包含列出的任意一個角色，元素就會顯示
export const hasAnyRole = {
  install (Vue) {
    Vue.directive('hasAnyRole', {
      bind (el, binding, vnode) {
        let roles = getStore("roles");
        let value = binding.value.split(',')
        let flag = false
        for (let v of value) {
          if (roles.includes(v)) {
            flag = true
          }
        }
        if (!flag) {
            el.parentNode.removeChild(el)
        }
      }
    })
  }
}

• 以上方式使用示例：

<div v-hasPermission="'add','edit'">XBoot</div>
<div v-hasAnyPermission="'add','edit'">XBoot</div>
<div v-hasRole="'ROLE_ADMIN','ROLE_USER'">XBoot</div>
<div v-hasAnyRole="'ROLE_ADMIN','ROLE_USER'">XBoot</div>