vue-authority-component v1.0.0

组件注册

• 安装 npm install vue-authority-component --save
• 全局注册

import Vue from "vue";
import VueAuthorityComponent from "vue-authority-component";
Vue.use(VueAuthorityComponent);

项目中使用

以前

<el-table-column align="center" v-if="$route.meta.authority.button.detail" label="操作" width="100">
            <template slot-scope="scope">
              <el-dropdown @command="handleCommand($event, scope.row)">
                <el-button type="primary" size="small">
                  操作
                </el-button>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item command="a">查看</el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
            </template>
          </el-table-column>

现在

// 第一步 把组件换成 AuthorityComponent
<AuthorityComponent
// 第二步 把需要的组件名称 通过 ComponentName 属性 传入
// 其他的属性和使用方法与 原组件相同
            ComponentName="el-table-column"
            align="center"
            // 当被多个权限控制传入数组
            // 如果只有单个则传入 字符串 permission="button.detail"
            :permission="['button.detail']"
            label="操作"
            width="100"
          >
            <template slot-scope="scope">
              <el-dropdown @command="handleCommand($event, scope.row)">
                <el-button type="primary" size="small">
                  操作
                </el-button>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item command="a">查看</el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
            </template>
          </AuthorityComponent>

权限控制实现

组件内方法是通过路由的meta标签上 meta.authority 属性获取权限，所以 permission 上的字符串 button.detail 其实是在 authority 上 获取属性 button 对象中的 detail 字段, 通过强制转化为boolean 类型 来确定组件是否显示。 可以通过 多次点来获取多个内部对象中的值 此处借鉴了vue 模版编译 变量值。