angular实现列表按钮的权限控制（ng-if）

最新推荐文章于 2023-08-09 10:36:58 发布

原创最新推荐文章于 2023-08-09 10:36:58 发布 · 8k 阅读

4 ·

CC 4.0 BY-SA版权

angular 专栏收录该内容

17 篇文章

订阅专栏

本文介绍了如何在Angular应用中实现列表操作按钮的权限控制，通过在后台根据用户权限设置数据对象的"power"字段，然后在前端利用ng-if指令动态显示或隐藏删除和修改按钮。示例展示了管理员可以对所有项进行操作，而普通用户只能操作自己发布的内容。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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;

页面显示：