前端权限怎么弄，如何根据权限限制其能否进入该模块

简介：

  软件开发中的权限管理是常见的问题，因为，有的项目牵扯到不同工作人员的职责和权限，如酒店类软件开发，不同的人员登录进入到软件后，点击菜单（功能）是有权限限制的，这就是所谓的软件系统权限。

权限怎么弄（前端）?

• 首先软件的菜单的做成“活的”，即，菜单不能是纯粹的静态的，而应该是根据后端返回来的数据，来显示菜单的。

• 菜单如何做成活的？

  1、后端给前端返回菜单数据

               //获取菜单
				api.AjaxReponse('/QueryMenus', {
					'access_token': localStorage.getItem('access_token');//登录人的身份
				}, function(data) {
					that.menu_data = data.data;//后端验证成功后返回来菜单数据
				});

  2、前端只需要把它循环一下，显示在页面上就行。

<!--管理框-->
	<div class="frame">
		<span class="frame-a" v-for='(item,index) of menu_data' :id='item.id' :title='item.path'>
		     <span class="frame-img">
		     	<span class="number" v-if="index==2 && o_id == 'id'">{{o_number}}</span>
				<span class="number" v-if='index==4 && m_id == "id"'>{{m_number}}</span>
				<img :src="'img/menu_' + index + '.png'" />
			 </span>
			<span class="frame-text">{{item.name}}</span>
		</span>
   </div>

  3、根据登录用户id获取现有权限

//获取未处理订单
		api.AjaxReponse('/QueryEmployeeDetail', {
			'access_token': localStorage.getItem('access_token'),
			'uuid': localStorage.getItem('myself_uuid'),//个人id
		}, function(data) {
			that.my_menus = data.data.menus;//获取现有权限列表
			if(data.data.menus == null || data.data.menus == undefined || data.data.menus == ''){
				alert('您没有任何权限，请联系后台负责人')
			}
		                                            });

  4、通过现有权限来限制用户进入功能模块

//点击菜单
				mui('.frame').on('tap', '.frame-a', function() {//mui的点击事件，点击菜单模块
					var id = this.getAttribute('id');//获取点击的模块的id
					if(that.my_menus.includes(id)) {//判断是否有该模块权限
						var path = this.getAttribute('title');//跳转该模块的界面地址
						mui.openWindow({
							url: path
						});
					} else {
						alert('您没权限访问该模块');
					}
				})

事已至此，我们已经完成了一个APP模块权限的功能了。