1、angular实现权限控制。
区别于传统方式:例如ajax获取session,保存在客户端(ps不推荐:1.安全性 2.因为session在用户离开页面仍可以保存,会增大服务器的压力)
2、前提条件(个人亲身体会)
1、公司后台人员不要墨守成规,乐于使用简单正确的新技术(ps:很多公司后台还是叫前端取session)
2、并且后台要根据登录用户的权限查询数据库,并且向前台返回的数组中,数组中的每一个对象都要添加一个字段,这个例子中,我们命名为"power",有权限power=1,无权限power=0
3.废话bb完了,直接上代码
了开始上代码
项目需求:1、一个列表,每一项都有删除、修改按钮
2、管理员可以对每一项进行删除、修改;普通用户只能删除、修改自己发布的,其余列表的删除、修改按钮隐藏
html代码:
<table> <thead> <tr> <td>序号</td> <td>姓名</td> <td>年龄</td> <td>手机号</td> <td>操作</td> </tr> </thead> <tbody> <tr ng-repeat="list in lists"> <td ng-bind="list.id"></td> <td ng-bind="list.name"></td> <td ng-bind="list.age"></td> <td ng-bind="list.phoneNum"></td> <td> <button ng-if="list.power == 1">删除</button> ng-if用来判断循环出的每一行列表的按钮是否隐藏 <button ng-if="list.power == 1">修改</button> </td> </tr> </tbody> </table>
js代码
测试数据
var test=[
{"id":"1","name":"张三","age":22,"phoneNum":"18298705786","power":1},
{"id":"2","name":"王五","age":28,"phoneNum":"18456705786","power":1},
{"id":"3","name":"张三","age":29,"phoneNum":"18291235786","power":1},
{"id":"4","name":"蔡雄","age":22,"phoneNum":"18298705786","power":1},
{"id":"5","name":"张三","age":26,"phoneNum":"18759705786","power":1},
{"id":"6","name":"张楚","age":22,"phoneNum":"18298705786","power":0}//列表中“张楚”一项按钮应该隐藏
]
$scope.lists=test;
页面显示: