permission
Add permissions to your vue project, including pages and functions.It is based on vuex, vue-router and vue work.
向你的vue项目添加权限,包括页面和函数。它基于vuex, vue-router和vue工作。
Features
Browser Support
Latest ✔ | Latest ✔ | Latest ✔ | Latest ✔ | Latest ✔ | 9+ ✔ |
Installing
Using npm:
$ npm install permission-control-vue
Before use(使用前的准备工作)
Step 1:
You should ensure that the following code is in order in your main.js.
你应该确保以下代码在您的main.js中的顺序正确。
// Or something like thisimport Vue from 'vue'import App from './App.vue'import router from './router'import store from './store'...import Permission from 'permission-control-vue'// The third parameter is it's name that you store the permission map in its// 第三个参数与你在Vuex中存储权限用的map对象名称保持一致(default 'funcPrivilegeMap')// The fourth parameter should be the same as the name of the 403 page in your router.js file// 第四个参数与你vue-router中403无权访问页面path名称一致(default '/403')Vue.use(Permission, store, 'yourFuncPrivilegeMap', '/your 403 path')
Step 2:
Make sure your state and mutation declarations in your vue-store like this.
确保在Vuex中有类似如下的代码。
state: , mutations:
Step 3:
My user info init have something like
我的用户信息初始化类似于这样
$store.commit
Example
Pages permissions-control(页面权限控制)
You have a page 'permissions-one.vue'.
假如你有一个页面permissions-one.vue
It's controlled by 'permissions_one'
这个页面的权限是通过permissions-one字段控制的
// In your permissions-one.vue 那么在你的permissions-one.vue这样写 export default
You should have a 403 page.
你应该至少有一个403页面
// Like this in your vue-router *比如在你的vue-router中*...,...
Functions permissions-control(功能权限控制)
You have a page function 'permissions-two'.
你有一个功能权限permissions-two
It's controlled by 'permissions_two'
这个功能权限被字段permissions-two控制
<permissions-two v-