Function point management and permission control of Vue element front-end application development

Time:2021-10-23

summary

This essay introduces the function node management and permission control. The function node is managed as a business object data and allocated in the role category. In the interface element control, Vue + element front-end introduces Vue user-defined instruction directives for control.

1. Permission function point management

We have previously analyzed the table and relationship description of a permission system, as shown below.

The management of the authority function node is the management of TB_ The management operation of the function table, which is the function point we define for system control.

Permission function node management is used to display its tree results, including tree list management and detail list management, as shown in the following figure.

The view interface of the function node is as follows. In addition to displaying the details of the corresponding function node, it also lists which roles own and use this function node.

The interface for adding a function node is as follows: select a parent node and enter the information of the function node.

In order to facilitate the batch entry permission function node, we can perform batch entry based on the business table, as shown below.

In this way, the function node name for adding customer information will automatically change to customer / add, which is similar to others. In this way, you can quickly add relevant function nodes for this business table.

With the definitions of these function points, we can assign them to different roles in combination with role management. The following is how to assign different permission control points to roles in the role editing interface.

2. Vue + element front end permission control

The previous content introduces the management of permission function nodes and the role-based permission allocation processing, which are all prepared for the front-end implementation of permission control of interface elements.

First, we need to encapsulate the front-end JS end classes according to the ABP back-end interfaces. As mentioned earlier, the conventional get / getall / create / update / delete / count interfaces are defined in the baseapi base class, and other subclasses can inherit it.

The permission module involves user management, organization management, role management, menu management, function management, audit log, login log and other business classes. If these classes inherit baseapi, they will have relevant interfaces, as shown below.

Because the user related menus and permission sets are in the user category, we can define the corresponding back-end interface calls in userapi.

The getgrantedfunctionsbyuser method is a function to obtain the permission function point collection of the specified user.

The contents of the userapi class file user.js are as follows.

The getgrantedfunctionsbyuser method is a function to obtain the permission function point collection of the specified user. The function code is as follows.

Getgrantedfunctionsbyuser (ID) {// get user permission list
    return request({
      url: this.baseurl + 'GetGrantedFunctionsByUser',
      method: 'get',
      params: { id }
    })
  }

In the user’s store / modules / user.js, we add a function node status information, as shown below.

Then, each time the user obtains information, store its function node information, and the interface can carry out corresponding permission control according to the stored content.

Add a function to set user status information in mutation, as shown below.


SET_PERMITS: (state, permits) => {
    state.permits = permits
  }

In this way, in the getinfo function of user information acquisition, we can obtain the information collection of the user’s contained permission function points.

//Get user information
  getInfo({ commit, state }) {
    return new Promise((resolve, reject) => {
      user.getInfo(state.userid).then(response => {
        const { result } = response
       
        ....................

        commit('SET_ROLES', { roles, roleNames })
        commit('SET_NAME', name)
        commit('SET_INTRODUCTION', fullName)

        //Get user permissions
        user.GetGrantedFunctionsByUser(state.userid).then(data => {
          var list = data.result.items
          if (list) {
            var permits = []
            list.forEach(element => {
              if (element && element.name && typeof (element.name) !== 'undefined') {
                Permits. Push (element. Name. Tolowercase()) // lowercase
              }
            });
            //Set user function permission point
            commit('SET_PERMITS', permits)
          }
        })

        resolve(result)
      }).catch(error => {
        reject(error)
      })
    })
  },

Now the front end also has these permission function node control sets, which are the accessible permission sets corresponding to the current login user.

The next step is to control the interface elements according to these permission sets, such as whether some operation buttons, such as add, edit, delete, import and export, can be displayed.

This operation is the user-defined instruction operation designed for Vue. If you don’t know the use of user-defined directives, you can refer to the following official introduction: https://cn.vuejs.org/v2/guide/custom-directive.html

If we define a user-defined instruction of v-permit to handle the binding of permission function points, the interface should be handled as follows.

<el-row style="float:right;padding-bottom:10px">
      < El button icon = "El icon search" type = "primary" size = "mini" round @ Click = "search()" > query < / El button >
      < El button icon = "El icon refresh left" type = "warning" size = "mini" round plain @ Click = "resetsearchform ('searchform ')" > Reset < / El button >
      < El button v-permit = "['user / add ']" icon = "El icon plus" type = "success" size = "mini" round @ Click = "showadd()" > Add < / El button >
      < El button v-permit = "['user / import ']" icon = "El icon upload2" type = "warning" size = "mini" round @ Click = "showimport()" > Import < / El button >
      < El button v-permit = "['user / export ']" icon = "El icon download" type = "warning" size = "mini" round @ Click = "showimport()" > export < / El button >
    </el-row>

By operating in a manner similar to v-permit = “[‘user / add ‘]”, you can specify the function points of this operation button. If the user has these function points, they can be used, otherwise they will not be displayed.

We define a user-defined instruction file of permit.js in the directive directory for corresponding processing.

Then define the loading processing logic in the release file of index.js, as shown in the following code


import permit from './permit'

const install = function(Vue) {
  Vue.directive('permit', permit)
}

if (window.Vue) {
  window['permit'] = permit
  // eslint-disable-next-line no-undef
  Vue.use(install)
}

permission.install = install
export default permission

Finally, in main.js, the user-defined instructions are loaded globally, as shown in the following code.

//Custom directives that introduce and use permission control points globally
import permission from './directive/permission'
Vue.use(permission)

With the status information in the store module and the support of user-defined instructions, you can use these permission points to control operations on the corresponding button elements on the interface.

The above is the details of function point management and permission control of Vue element front-end application development. For more information about Vue, please pay attention to other relevant articles of developeppaer!

Recommended Today

OC basis

IOS development interview essential skills chart.png What are objects and what are the objects in OC? An object is an instance of a class; Is an instance created through a class, which is generally called an instance object; Common objects in OC include instance objects, class objects, and metaclass objects; What is a class? What […]