2019-07-08 Vue-vue项目文件的权限配置

首先，在项目目录下的main.js里写入权限添加的主函数

• 在项目目录下的server文件夹下的server.js文件中，写入接口函数

  	// 用户权限
  	export function get_permission(params) {
  	  return axios.get('/user/getPermList', {
  	    params
  	  });
  	}
  

• 登录页面login.vue中，写入调接口函数

  	// 权限
      getPermission() {
        // let that = this;
        const obj = {
          appCode: 1003  // 不同项目appCode不通，是后端人员配置的
        };
        get_permission(obj)    // 接口函数写在方法里，不要直接写在mounted初始化函数里
          .then(res => {
            if (res.data.code === "90000") {
              let permissionInitList = res.data.result; // 获取接口里的权限数据
              if (permissionInitList != null) {
                sessionStorage.setItem(
                  "permissionList",
                  JSON.stringify(permissionInitList)  // 用局部缓存保存起来
                );
              }
            }
          })
          .catch(function(error) {
            console.log(error);
          });
      }
  

• main.js文件里写入主方法

  	// 权限函数
  	Vue.prototype.hasPermission = function (userPermission = '') {
  	  let permissionList = sessionStorage.getItem('permissionList') || [];  // 获取缓存的权限列表
  	  if (permissionList.length !== 0) {
  	    permissionList = JSON.parse(permissionList);
  	  }
  	  let userName = sessionStorage.getItem('userName');
  	  if (userName === "administrator") {   // 如果是管理员则不做权限操作，否则为普通用户设置权限
  	    return true;
  	  } else {
  	    return permissionList.includes(userPermission) || false;  // 返回是否包含参数权限
  	  }
  	}
  

然后，在需要的文件中写入main.js中的方法，配置权限

• 为菜单栏添加权限，在项目目录下的data文件里的menu.js中

  • 菜单栏

    

  • menu.js

    	export const menu = [
    	  {
    	    icon: 'fa fa-dashboard',
    	    index: 'team-show1',
    	    title: '平台管理',
    	    permission: '/oes-workbench-manage/workbench-menu',
    	    subs: [
    	      {
    	        index: 'team-show',
    	        title: '工作组总览',
    	        permission: '/oes-workbench-manage/workbench-overview-menu'
    	      },
    	      {
    	        index: 'team-manage',
    	        title: '工作组管理',
    	        permission: '/oes-workbench-manage/workbench-groupmanage-menu'
    	      }
    	    ]
    	  }
    	  ...(需要的菜单添加权限permission)
     	]
    

• 给项目文件添加权限，在<button>按钮或者<div>元素上添加v-if = hasPermission(args)方法
  • 权限表格
    
  • 在需要的文件里添加方法，如此项目文件notice-manage.vue中

    		<el-button
            type="primary"
            @click="deletePatchButton"
            :disabled="deleteBtn"
            icon="el-icon-delete"
            v-if="hasPermission('/oes-workbench-manage/notice/del')"  // 参数为上述后端给的表格里的路径
          >批 量 删 除</el-button>
    

至此，项目权限配置完成，希望能帮助到大家！