Vue权限管理组件(VueAccessControl)

快速上手

现阶段，VueAccessControl仅支持通过npm安装的方便使用，暂不支持CDN引入，后期会考虑。

安装VueAccessControl

yarn add @lywzx/vue.access.control # or：npm install @lywzx/vue.access.control --save

安装完成之后，在src目录中，创建一个access/index.js文件，调用Vue.use(VueAccessControl)，完成安装。


 





// src/access/index.js
import Vue from 'vue';
import VueAccessControl from '@lywzx/vue.access.control';

const options = {};
Vue.use(VueAccessControl, options);

特别注意：如果需要启用路由的相关功能的话，你需要在Vue.use(VueAccessControl)之前调用Vue.use(VueRouter)。

使用示例

完成安装工作之后，需要创建一个Access实例，改动如下：

access/index.js文件完整如下：


 









import VueAccessControl from '@lywzx/vue.access.control';
import Vue from 'vue';

Vue.use(VueAccessControl, {});

const access =  new VueAccessControl.Access({
  routes: []
});

export default access;

编辑src/main.js，更改new Vue如下

import Vue from 'vue';
import access from './access/index';

new Vue({
    // ... other like store, router ...
    access, 
}).$mount('#app');

在登录完成，获取到用户角色及权限时，你可以像如下方式设置角色及权限

// Login.vue

// ....
    
    methods: {
        login{} {
            api.login({
                // ...
            }).then(( {role, permissions}) => {
                // 设置角色
                this.$access.setRole(role);
                // 设置对应的权限
                this.$access.setPermissions(permissions);
            });
        }
    }

设置完权限后，就可以在组件中，正常进行鉴权了。

组件中应用

在组件中，可以使用$access来访问VueAccessControl权限管理实例。可以使用can、hasRole、ability等访问来判断当前用户是否包含权限。

<template>
    <div>
        <router-link to='admin/manage' v-if="$access.hasRole('admin')">后台管理</router-link>
        <router-link to='admin/user/manage' v-show="$access.can('edit_user_info')">编辑用户信息</router-link>
    </div>
</template>

当然，你也可以在对应方法中，去做判断，像如下代码：

export default {
    method: {
        comment() {
            if (this.$access.hasRole('admin')) {
                // ...
            }
        }
    }
}

为什么不提供v-if-role等v-on:can等类似指令及组件？

由于v-if类指令，是vue内部指令，在不更改Vue源代码的情况下，只能模拟，不能实现真正的此功能；所以考虑只直接使用v-if配合$access使用也许更合适。

← 使用路由中间件功能 →