10分钟快速搭建React权限菜单设计
我又来了， react还剩下redux就结束了。就可以开展java、spring boot的学习流程了！！！
本次的功能实现基于上次的【工具篇】10分钟学会Ant Design of React用法,再次的基础上添加权限菜单设计，具体效果图如下：
1.创建角色
2.设置权限
3.用户授权
瓷们，走起学习了！！！
一、权限菜单设计基础概念
1.1 权限
“权”代表了“权利”，划分了系统的职权，不同的用户拥有不同的权利划分；“限”代表“限制”，在权利划分的基础上对职能范围进行了限制。
权限控制，赋予不同角色看到不同菜单的权限。权限能够较好的解决系统安全问题，不同部门使用系统互不感染，因此被系统广泛应用。
1.2 用户、角色
（1）用户
用户时指系统的登录用户，可以理解为一系列的人员。例如登录用户为张三、李四。
（2）角色
角色是用户在系统中担任的角色。例如总裁、经理、员工。
1.3 权限模型
（1）传统的权限模型
在早期中，传统的权限模型就是为用户分配菜单权限。缺点：随着人数增加，每一个员工都需要分配一次，效率太低。
（2）RBAC权限模型
RBAC，基于角色的访问控制(Role-Based Access Control)，主要通过角色和权限建立管理，再赋予用户不同的角色，来实现权限控制的目标。
即先把权限赋予角色，即可完成权限的分配；再问用户分配相应的角色，即可直接获得角色拥有的权限。
愉快的代码学习开始了！！！
二、Antd Design of React实现权限菜单
2.1 创建角色
1.源码
<Button type="primary" onClick={()=>this.onhandleAddRole("创建角色")}>创建角色</Button>
onhandleAddRole=(title)=>{
this.setState({
title:title,
visible:true
})
}
<Modal
title={this.state.title}
visible={this.state.visible}
footer={null}
onCancel={this.handleCancel}
>
<Form onFinish={this.handleOk}>
<Form.Item label="角色名称" name="role_name" {...formItemLayout} >
<Input placeholder="请输入角色名称"/>
</Form.Item>
<Form.Item label="状态" name="state" {...formItemLayout} rules={[{required:true,message:"请选择角色状态！"}]}>
<Select placeholder="启用">
<Option value="1">启用</Option>
<Option value="2">弃用</Option>
</Select>
</Form.Item>
<Form.Item>
<Button type="primary" htmlType="submit" style={{margin:'0 60px'}}>确认</Button>
<Button type="primary" onClick={this.handleCancel}>取消</Button>
</Form.Item>
</Form>
</Modal>
2.效果
2.2 设置权限
1.源码
实现过程：先读取menuconfig生成tree树，再从后端读取数据的已选择好的页面。
<Button type="primary" onClick={()=>this.onhandleAddPerm("设置权限")}>设置权限</Button>
// 设置权限
onhandleAddPerm=(title)=>{
let item = this.state.selectedRow;
if(!item){
message.error("请先选择一个角色")
return;
}
console.log(item)
let role_id = item.role_name;
let role_name = "";
if(role_id==1){
role_name="管理人员";
}else if(role_id==2){
role_name="财务人员";
}else if(role_id==3){
role_name="市场人员";
}
let state = item.status;
this.formRef.current.setFieldsValue({
role_name:role_name,
state:state
})
// let data = Object.assign({},this.state.roleInfo,{id:item.id,role_name:role_name,create_time:item.create_time,status:item.status,authorize_time:item.authorize_time,authorize_user_name:item.authorize_user_name});
this.setState({
title:title,
visiblePer:true,
menuInfo:item.menus
})
}
onCheck=(checkedKeys)=>{
// console.log(checkedKeys)
this.setState({
menuInfo:checkedKeys
})
}
<Modal
title={this.state.title}
visible={this.state.visiblePer}
footer={null}
onCancel={this.handleCancelPer}
forceRender={true}
>
{/*ref绑定到form*/}
<Form ref={this.formRef} onFinish={this.handleOkPer}>
<Form.Item label="角色名称" name="role_name" {...formItemLayout} rules={[{required:true,message:"请输入用户名！"}]}>
<Input disabled placeholder="请输入角色名称"/>
</Form.Item>
<Form.Item label="状态" name="state" {...formItemLayout} rules={[{required:true,message:"请选择角色状态！"}]}>
<Select placeholder="启用">
<Option value="1">启用</Option>
<Option value="2">弃用</Option>
</Select>
</Form.Item>
<Tree
checkable
defaultExpandAll
treeData={menuConfig}
checkedKeys={this.state.menuInfo}
onCheck={(checkedKeys)=>{
this.onCheck(checkedKeys);
}}
>
{/* <TreeNode title="平台权限" key="platform_all">
{this.renderTreeNodes(menuConfig)}
</TreeNode> */}
</Tree>
<Form.Item>
<Button type="primary" htmlType="submit" style={{margin:'0 60px'}}>确认</Button>
<Button type="primary" onClick={this.handleCancelPer}>取消</Button>
</Form.Item>
</Form>
</Modal>
2.效果展示
2.3 用户授权
1.源码
<Button type="primary" onClick={()=>this.onhandleAddUser("用户授权")}>用户授权</Button>
// 用户设置权限
onhandleAddUser=(title)=>{
let item = this.state.selectedRow;
if(!item){
message.error("请先选择一个角色")
return;
}
let role_id = item.role_name;
let role_name = "";
if(role_id==1){
role_name="管理人员";
}else if(role_id==2){
role_name="财务人员";
}else if(role_id==3){
role_name="市场人员";
}
this.formRef_User.current.setFieldsValue({
role_name:role_name,
})
this.setState({
title:title,
visibleUser:true
})
// 筛选出符合要求的
this.getUserRole();
}
componentDidMount(){
// 获取所有数据
this.getUserRoleList();
}
// 获取用户框
getUserRoleList=()=>{
axios.ajax({
url:"/role/add_user"
}).then((res)=>{
if(res.code=='0'){
this.setState({
userListData:res.result.item_list
})
}
})
}
// 筛选出符合要求的用户
getUserRole=()=>{
const dataSource = this.state.userListData;
const targetKeys = [];
const mockData = [];
for(let i=0;i<dataSource.length;i++){
const data = {
key:dataSource[i].user_id,
title:dataSource[i].user_name,
status:dataSource[i].status
}
if(data.status==1){
targetKeys.push(data.key);
}
mockData.push(data);
}
this.setState({
mockData,targetKeys
});
console.log(mockData)
console.log(targetKeys)
}
<Modal
title={this.state.title}
visible={this.state.visibleUser}
footer={null}
onCancel={this.handleCancelUser}
forceRender={true}
>
{/*ref绑定到form*/}
<Form ref={this.formRef_User} onFinish={this.handleOkUser}>
<Form.Item label="角色名称" name="role_name" {...formItemLayout} >
<Input disabled/>
</Form.Item>
<Form.Item label="选择用户"{...formItemLayout} >
<Transfer
listStyle={{width:200,height:400}}
title={["待选用户","已选用户"]}
dataSource={this.state.mockData}
targetKeys={this.state.targetKeys}
showSearch
searchPlaceholder="输入用户名"
filterOption={this.filterOption}
onChange={this.handleChange}
render={item => item.title}
/>
</Form.Item>
<Form.Item>
<Button type="primary" htmlType="submit" style={{margin:'0 60px'}}>确认</Button>
<Button type="primary" onClick={this.handleCancelUser}>取消</Button>
</Form.Item>
</Form>
</Modal>
2.效果展示
最后的话，就是之前form表单遗留了几个问题，现在解决了，记录一下。
三、问题
3.1 问题1 form表单赋值
之前做的form表单赋值问题，已解决。antd4.0版本与之前的赋值不同，而且官网只是浅浅的介绍了几句~~
三步走来解决这个问题
// 创建一个ref
formRef = React.createRef();
{/*ref绑定到form*/}
<Form ref={this.formRef} onFinish={this.handleOkPer}>
<Form.Item label="角色名称" name="role_name" {...formItemLayout} rules={[{required:true,message:"请输入用户名！"}]}>
<Input disabled placeholder="请输入角色名称"/>
</Form.Item>
<Form.Item label="状态" name="state" {...formItemLayout} rules={[{required:true,message:"请选择角色状态！"}]}>
<Select placeholder="启用">
<Option value="1">启用</Option>
<Option value="2">弃用</Option>
</Select>
</Form.Item>
<Tree
checkable
defaultExpandAll
treeData={menuConfig}
checkedKeys={this.state.menuInfo}
onCheck={(checkedKeys)=>{
this.onCheck(checkedKeys);
}}
>
{/* <TreeNode title="平台权限" key="platform_all">
{this.renderTreeNodes(menuConfig)}
</TreeNode> */}
</Tree>
<Form.Item>
<Button type="primary" htmlType="submit" style={{margin:'0 60px'}}>确认</Button>
<Button type="primary" onClick={this.handleCancelPer}>取消</Button>
</Form.Item>
</Form>
// 赋初值
this.formRef_User.current.setFieldsValue({
role_name:role_name,
})
3.2 问题2 form表单抽离
class OpenCityForm extends React.Component{
styduonFinish=(values)=>{
this.props.onFinish(values);
}
stydyonCancel=()=>{
this.props.onCancel();
}
render(){
const formItemLayout = {
labelCol:{
span:5
},
wrapperCol:{
span:10
}
}
return(
<Form layout="horizontal" onFinish={this.styduonFinish} >
<Form.Item label="选择城市" {...formItemLayout} name="city">
<Select>
<Option value="">全部</Option>
<Option value="1">北京市</Option>
<Option value="2">天津市</Option>
</Select>
</Form.Item>
<Form.Item label="营运模式" {...formItemLayout} name="use_mode">
<Select>
<Option value="1">自营</Option>
<Option value="2">加盟</Option>
</Select>
</Form.Item>
<Form.Item label="用车模式" {...formItemLayout} name="car_mode">
<Select>
<Option value="1">指定停车点</Option>
<Option value="2">禁停区</Option>
</Select>
</Form.Item>
<Form.Item {...formItemLayout}>
<Row>
<Col span={12}>
<Button type="primary" htmlType="submit" >
确认
</Button>
</Col>
<Col span={12}>
<Button onClick={this.stydyonCancel}>
取消
</Button>
</Col>
</Row>
</Form.Item>
</Form>
)
}
}
<OpenCityForm ref="child" onRef={this.onRef} onFinish={this.onFinish} onCancel={this.onCancel}/>
// 提交开通城市
onFinish=(values)=>{
console.log(values);
axios.ajax({
url:"/city/open",
data:{
param:values
}
}).then((res)=>{
if(res.code=='0'){
message.success("开通成功！");
this.setState({
isShowOpenCity:false
})
this.requestList();
}
})
}
// 取消开通城市
onCancel=()=>{
this.setState({
isShowOpenCity:false
})
}
最后，接着leetcode的学习，react的redux的学习。结束redux，就马不停蹄开java的spring boot框架！！！
扫一扫
594
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
