First, in the project directorymain.jsWrite permission to add the main function

  • In the server folder under the project directoryserver.jsFile, write the interface function 
    	// User permissions
	export function get_permission(params) {
	  return axios.get('/user/getPermList', {
	    params
	  });
	}
Copy the code
  • The login pagelogin.vue, write the callback interface function 
    	/ / permission
    getPermission() {
      // let that = this;
      const obj = {
        appCode: 1003  // Different project appCode is different, it is configured by back-end personnel
      };
      get_permission(obj)    // Use the mounted initializer to write interface functions in methods
        .then(res= > {
          if (res.data.code === "90000") {
            let permissionInitList = res.data.result; // Get permission data from the interface
            if(permissionInitList ! =null) {
              sessionStorage.setItem(
                "permissionList".JSON.stringify(permissionInitList)  // Save it with local cache
              );
            }
          }
        })
        .catch(function(error) {
          console.log(error);
        });
    }
Copy the code
  • Write the main method in the main.js file 
    	// Permission function
	Vue.prototype.hasPermission = function (userPermission = ' ') {
	  let permissionList = sessionStorage.getItem('permissionList') | | [];// Get the list of cached permissions
	  if(permissionList.length ! = =0) {
	    permissionList = JSON.parse(permissionList);
	  }
	  let userName = sessionStorage.getItem('userName');
	  if (userName === "administrator") {   // If you are an administrator, do not perform permission operations; otherwise, set permissions for common users
	    return true;
	  } else {
	    return permissionList.includes(userPermission) || false;  // Returns whether to include parameter permissions}}Copy the code

Then, write to the required filemain.jsTo configure permissions

  • Add permissions to the menu bar in menu.js in the data file in the project directory

    • The menu bar

    • menu.js

      	export const menu = [
	  {
	    icon: 'fa fa-dashboard'.index: 'team-show1'.title: 'Platform Management'.permission: '/oes-workbench-manage/workbench-menu'.subs: [{index: 'team-show'.title: 'Working Group Overview'.permission: '/oes-workbench-manage/workbench-overview-menu'
	      },
	      {
	        index: 'team-manage'.title: 'Group Management'.permission: '/oes-workbench-manage/workbench-groupmanage-menu'}}]... [add permission to required menu]Copy the code
  • Add permissions to project files in<button>Button or<div>Add to elementv-if = hasPermission(args)methods
    • Permission form
    • Add methods to required files, such as project filesnotice-manage.vueIn the 
      		<el-button
        type="primary"
        @click="deletePatchButton"
        :disabled="deleteBtn"
        icon="el-icon-delete"
        v-if="hasPermission('/oes-workbench-manage/notice/del')"  // The parameter is the path in the table given by the above backend</el button>Copy the code

At this point, the project permission configuration is complete, I hope to help you!