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

最新推荐文章于 2023-01-12 09:40:31 发布

小格子衬衫

最新推荐文章于 2023-01-12 09:40:31 发布

阅读量411

点赞数

分类专栏：跨端开发文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/m0_64818669/article/details/125622161

版权

跨端开发专栏收录该内容

11 篇文章 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、测试前未选中。

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

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

1、template中的代码。

<template>
	<view>
		<menuDraw></menuDraw>  <!--使用导入的组件-->
		<uni-nav-bar title="分配角色" leftText="返回" rightText="保存" @clickLeft="doBack" @clickRight="doSave"></uni-nav-bar>
	    <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>
		<!--弹出警告对话框-->
		<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>
		<!-- 分页器 -->
		<uni-pagination
		:current="pageIndex"
		:pageSize="pageSize"
		:total="pageTotal"
		@change="pageChanged"
		/>
	</view>
</template>

2、script中的代码。

<script>
	import menuDraw from "../template/menu_draw.vue";//第一步：导入外部文件
	export default {
		//组件的声明
		components:{
			menuDraw//声明组件
		},
		data() {
			return{
				msg:null,//对话框的提示字符串
				tableCheckIndex:[],//表格复选框被选中的索引列表
				pageIndex:1,//页码
				pageSize:6,//每页展示数据的条数
				pageTotal:0, //数据总条数
				uid:null,//用户id
				roleList:null,//全部角色
				userRoleList:null//用户所拥有的角色列表
			}
		},
		onLoad(options) {
			this.uid=options.id;//接收页面传参
			console.log("分配:用户id="+this.uid);
		},
		onShow() {
			this.requestRoleList();//调用请求列表的函数，通过http请求微服务的用户列表
		},
		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();//调用获取用户所拥有的角色列表的接口
					}
				})
			},
			/*获取所有用户所用有的角色列表*/
			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);
								}
							}
						}
					}
				})
			},
			//*当分页器被点击时触发*/
			pageChanged(e){//*当分页器被点击时触发
				console.log(e.current);//打印出当前点击的页码
				this.pageIndex = e.current;//给页码赋值
			    this.requestRoleList();
			},
			/*返回*/
			doBack(){
				uni.navigateBack();
			},
			/*保存*/
			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();
					}
				})
			},
			/*当表格行的状态变化时触发*/
			selectionChanged(e){
				console.log(e);
				this.tableCheckIndex = e.detail.index;//将表格被选中项的索引赋值给变量
			},
			//点击对话框确认按钮执行的操作
			confirm(){
				this.$refs.popup.close();
			},
			//点击对话框关闭按钮执行的操作
			close() {
				this.$refs.popup.close();
			},
			//弹出警告对话框
			open() {
				this.$refs.popup.open();
			}
	}
}
</script>

<style>

</style>

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