permission-control-vue v1.1.2

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 this
import 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: {
    yourFuncPrivilege: [],
    yourFuncPrivilegeMap: {},
    ...
    }，
    mutations: {
        YOUR_SET_FUNC_PRIVILEGE(state, value) {
          state.yourFuncPrivilege = value
          let map = {}
          value.forEach(item => {
            /*
                There are some things you need to base on actual data
				这里你需要根据实际数据做一些处理
                Like this 
				*我拿到的数据是这样的*
                    "data": {
                        "functions": [
                            {
                                "functionId": "permission_one",
                                "functionName": "permission_description_one",
                                "show": true
                            },
                            {
                                "functionId": "permission_two",
                                "functionName": "permission_description_two",
                                "show": false
                            }
                        ]
                    }
                My code like
				那么我采用的操作是这样的
                    map[item.functionId] = item.show
                Or do more
            */
          })
          state.yourFuncPrivilegeMap = map
        },
        ...
    }

Step 3:

My user info init have something like
我的用户信息初始化类似于这样

$store.commit('YOUR_SET_FUNC_PRIVILEGE', res.data.functions)

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 {
  privilege(func) {
    // Or do more, like edit, add or detail have different controller
	// 可以做更多的处理操作
	
    return func['permissions_one']
  },
  name...
  data...

You should have a 403 page.
你应该至少有一个403页面

// Like this in your vue-router  
*比如在你的vue-router中*
...
{
  path: '/your 403 path',
  name: 'your 403 path name',
  component: resolve => require(['.../forbidden.vue'], resolve)
},
...

Functions permissions-control(功能权限控制)

You have a page function 'permissions-two'.
你有一个功能权限permissions-two
It's controlled by 'permissions_two'
这个功能权限被字段permissions-two控制

<permissions-two v-if="$allow['permissions_two']">...</permissions-two>

That is ok