un7.5:如何在前后端分离的情况下实现权限分配？

た入场券 2023-10-11 17:46 14阅读 0赞

一套系统中，必不可少的就是权限分配了，那么我们该如何实现权限分配这一功能呢？

首先，我们说一下需要的软件。

前端：HbuilderX

后端：IDEA

测试浏览器：火狐

接下来，我来给大家分享一些自己的经验。

一、补充后台代码，关于assign方法的，在接口，实现类，controller中都需要写(在之前的代码里都有写，如果需要的话可以翻之前的代码，在这里我就不多说了)。

二、我们在user\_role.vue中设置一些事件。

1、首先我们需要设置分配角色的按钮，然后设置保存、返回、复选框等事件，代码如下：

<uni-nav-bar title="分配角色" leftText="返回" rightText="保存" @clickLeft="doBack" @clickRight="doSave"></uni-nav-bar>
    	    <uni-table ref="roleTable" :border="true" type="selection" @selection-change="selectionChanged">

2、其次我们需要在<script></script>中创建相应的函数，代码如下：

/*返回*/
    			doBack(){
    				uni.navigateBack();
    			},

保存

/*保存*/
    			doSave(){
    				
    			},

复选框

/*当表格行的状态变化时触发*/
    			selectionChanged(e){
    				console.log(e);
    				this.tableCheckIndex = e.detail.index;//将表格被选中项的索引赋值给变量
    			},

三、获取角色的列表。

1、在UI中写一个表格，代码如下：

<uni-table ref="roleTable" :border="true" type="selection" @selection-change="selectionChanged">
    			<uni-tr>
    				<uni-th>角色名称</uni-th>
    			</uni-tr>
    			<uni-tr v-for="role in roleList">
    				<uni-td>{
       {role.name}}</uni-td>
    			</uni-tr>
    		</uni-table>

2、在date中放入数据，代码如下：

data() {
    			return{
    				msg:null,//对话框的提示字符串
    				tableCheckIndex:[],//表格复选框被选中的索引列表
    				pageIndex:1,//页码
    				pageSize:6,//每页展示数据的条数
    				pageTotal:0, //数据总条数
    				uid:null,//用户id
    				roleList:null,//全部角色
    				userRoleList:null//用户所拥有的角色列表
    			}
    		},

3、获取全部角色，代码如下：

methods: {
    			/*获取全部角色*/
    			requestRoleList(){
    				uni.request({
    					url:"http://localhost:8082/authrole/show",
    					data:{
    					pageIndex: this.pageIndex,
    					pageSize: this.pageSize
    					},
    					success: (res) => {
    						console.log(res.data.data);
    						this.roleList = res.data.data;
    						this.pageTotal = res.data.total;
    						this.requestUserRoles();//调用获取用户所拥有的角色列表的接口
    					}
    				})
    			},

4、获取所有用户所用有的角色列表，代码如下：

/*获取所有用户所用有的角色列表*/
    			requestUserRoles(){
    				uni.request({
    					url: "http://localhost:8082/authrole/user_role_list?uid="+this.uid,
    					success: (res) => {
    						console.log(res.data.data);
    						this.userRoleList = res.data.data;
    						/*业务逻辑判断，比对所拥有的的角色，如果比对成功，就让该条记录的复选框选中。*/
    						for(var i = 0; i < this.roleList.length; i++){
    							for(var j = 0; j < this.userRoleList.length; j++){
    								if(this.roleList[i].id == this.userRoleList[j].id){
    									/*让该条记录的复选框被选中*/
    									this.$refs.roleTable.toggleRowSelection(i,true);
    								}
    							}
    						}
    					}
    				})
    			},

四、处理页面参数。

1、接收页面传参，代码如下：

onLoad(options) {
    			this.uid=options.id;//接收页面传参
    			console.log("分配:用户id="+this.uid);
    		},

2、调用请求列表函数，代码如下：

onShow() {
    			this.requestRoleList();//调用请求列表的函数，通过http请求微服务的用户列表
    		},

五、保存所选角色，代码如下：

/*保存*/
    			doSave(){
    				var ids = [];
    				for(var i = 0; i < this.tableCheckIndex.length; i++){
    					ids[i] = this.roleList[this.tableCheckIndex[i]].id;
    				}
    				uni.request({
    					url: "http://localhost:8082/authuser/assign_role",
    					data:{
    						uid: this.uid,
    						roleIds: ids
    					},
    					success: (res) => {
    						if(res.data.code == 200){//授权成功
    							this.msg = res.data.data;
    						}else{//授权失败
    							this.msg = res.data.msg;
    						}
    						this.open();
    					}
    				})
    			},

六、保存失败后设置弹窗。

1、UI中设置警告对话框，代码如下：

<uni-popup ref="popup" type="dialog">
    			<uni-popup-dialog mode="base" title="通知" :content="msg" :beforeClose="true" @close="close" @confirm="confirm"></uni-popup-dialog>
    		</uni-popup>

2、设置弹出警告对话框，代码如下：

//弹出警告对话框
    			open() {
    				this.$refs.popup.open();
    			}

七、在火狐浏览器测试。

1、测试前未选中。

![a71e21de3b964bb89b9cab40b30c7e3c.png][]

2、测试并返回重新进入，发现我之前选中的教师及普通用户已被选中。

![b4c083c5738f4342903be80d0d266c5e.png][]

至此，功能实现，下面附上全部代码。

1、template中的代码。

2、script中的代码。

好了，今天的分享到这里就结束了，有问题可以随时问我，希望能够帮助大家。

[a71e21de3b964bb89b9cab40b30c7e3c.png]: https://img-blog.csdnimg.cn/a71e21de3b964bb89b9cab40b30c7e3c.png
[b4c083c5738f4342903be80d0d266c5e.png]: https://img-blog.csdnimg.cn/b4c083c5738f4342903be80d0d266c5e.png