内部平台权限(ps:vue)

在写内部平台的时候难免会涉及到权限问题，例如侧边栏权限、页面权限、页面按钮权限等，于是乎就把自己用到的记录下来。

1.新建一个auth.js用来记录权限

auth.js
/* 
* 映射用户标签->MD5加密
* ep-admin：管理员        bcb547adb3acab85b9a4c7953005bee9
*/
export const authMap = {
  '6f36dc9dedcc33baf3808d8b179302bf':'ps',
  '6f36dc9dedcc33baf3808d8b17930233':'ima',
  'bcb547adb3acab85b9a4c7953005bee9':'ep-admin',
  'c0722c6feb78c84222d9d064428a7334':'_superAdmin'
};

export const auth = {
		 //欢迎页面
		 '/welcome':['admin'],
		   '/generateRouteGm:toolgmImport': ['ep-admin','ppm','se'],//导出
		 }

2.到页面中使用

2.1页面用户登录权限

登录成功后获取用户信息，与本地定义的权限列表进行对照，如果有就存储到本地
如:

2.2左侧菜单使用

（1）封装方法function.js
		import {auth,authMap} from './auth';
		var FUN = {};
		//权限控制
		FUN.$auth = function (key) {
		    var userAuth = window.localStorage.getItem('Auth');
		    //如果是超级管理员不做验证
		    if ( userAuth.includes('c0722c6feb78c84222d9d064428a7334')) {
		        return true;
		    }
		    //具有用户标签，验证其权限
		    var temp = [];
		    //用户权限标签列表
		    var authList = userAuth.includes(',') ? userAuth.split(',') : [userAuth];
		    authList.forEach((user) => {
		        if(auth[key]){
		            temp.push(auth[key].includes(authMap[user]));
		        }else{
		            console.error(key,'尚未添加权限');
		        }
		        
		    });
		
		    return temp.includes(true) ? true : false;
		};
		export default FUN;
		挂在main.js以便于 全局使用
		//公共方法
		import FUN from './libs/function.js';
		for (var key in FUN) {
		  Vue.prototype[key] = FUN[key];
		}

(2)左侧菜单使用v-if即可

(3)页面中按钮使用,根据当前路径加上:content 即可