快速上手

现阶段,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权限管理实例。可以使用canhasRoleability等访问来判断当前用户是否包含权限。

<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使用也许更合适。