通常公司的后臺(tái)管理系統(tǒng)都需要權(quán)限控制,即不同的角色用戶(hù)看到不同的菜單,如下圖:
站在用戶(hù)的角度思考問(wèn)題,與客戶(hù)深入溝通,找到管城網(wǎng)站設(shè)計(jì)與管城網(wǎng)站推廣的解決方案,憑借多年的經(jīng)驗(yàn),讓設(shè)計(jì)與互聯(lián)網(wǎng)技術(shù)結(jié)合,創(chuàng)造個(gè)性化、用戶(hù)體驗(yàn)好的作品,建站類(lèi)型包括:成都網(wǎng)站設(shè)計(jì)、網(wǎng)站制作、企業(yè)官網(wǎng)、英文網(wǎng)站、手機(jī)端網(wǎng)站、網(wǎng)站推廣、主機(jī)域名、虛擬空間、企業(yè)郵箱。業(yè)務(wù)覆蓋管城地區(qū)。
下面,通過(guò)react實(shí)現(xiàn)這樣的后臺(tái)管理系統(tǒng)(腳手架),功能簡(jiǎn)介:
1.頂部的菜單項(xiàng)根據(jù)用戶(hù)的角色動(dòng)態(tài)生成。
2.側(cè)邊測(cè)菜單項(xiàng)根據(jù)已選的頂部菜單動(dòng)態(tài)生成。
直接上代碼:
路由配置:
export default ( <Route path="/" component={App}> <IndexRoute component={EmployeeList}/> <Route path="/employee" component={Employee}> <IndexRoute component={EmployeeList}/> <Route path="/employee/list" component={EmployeeList}/> <Route path="/employee/detail/:id" component={EmployeeDetail}/> </Route> <Route path="/goods" component={Goods}> <IndexRoute component={GoodsList}/> <Route path="/goods/list" component={GoodsList}/> <Route path="/goods/detail/:id" component={GoodsDetail}/> </Route> </Route> )
頂部菜單項(xiàng)單獨(dú)成了一個(gè)組件:
// 動(dòng)態(tài)數(shù)據(jù) import React, { Component } from 'react' import { Link } from 'react-router' // 引入Link處理導(dǎo)航跳轉(zhuǎn) import { connect } from 'react-redux' import { fetchPostsIfNeeded, updateSubMenuWhenClick } from '../actions/count' import { Menu } from 'antd'; class TopMenu extends Component { constructor(props){ super(props); this.handleMenuClick = this.handleMenuClick.bind(this); } handleMenuClick(e){ // console.log(e.item.props['data-menukey']); const { updateSubMenuWhenClick } = this.props updateSubMenuWhenClick(true, e.item.props['data-menukey']) } componentWillMount() { } componentDidMount() { const { fetchPostsIfNeeded } = this.props fetchPostsIfNeeded() } render() { const { menuList, fetchPostsIfNeeded } = this.props if(menuList.length != 0) { fetchPostsIfNeeded(true, menuList[0].key) } return ( <Menu theme="dark" mode="horizontal" defaultSelectedKeys={['0']} style={{ lineHeight: '64px' }} onClick={this.handleMenuClick} > { menuList.map((e, index) => <Menu.Item key={index} data-menukey={e.key} > <Link to={{ pathname: e.url }} >{e.name}</Link> </Menu.Item> ) } </Menu> ) } } const getList = state => { return { menuList: state.update.menuList } } export default connect( getList, { fetchPostsIfNeeded, updateSubMenuWhenClick } )(TopMenu)
在render函數(shù)中,如果動(dòng)態(tài)生成的頂部菜單數(shù)據(jù)長(zhǎng)度不為0,則根據(jù)頂部菜單的key動(dòng)態(tài)生成側(cè)邊菜單項(xiàng)。
const { menuList, fetchPostsIfNeeded } = this.props if(menuList.length != 0) { fetchPostsIfNeeded(true, menuList[0].key) }
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持創(chuàng)新互聯(lián)。
當(dāng)前題目:react實(shí)現(xiàn)菜單權(quán)限控制的方法
文章URL:http://muchs.cn/article28/pisojp.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供標(biāo)簽優(yōu)化、用戶(hù)體驗(yàn)、網(wǎng)站建設(shè)、企業(yè)網(wǎng)站制作、網(wǎng)站改版、商城網(wǎng)站
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶(hù)投稿、用戶(hù)轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請(qǐng)盡快告知,我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如需處理請(qǐng)聯(lián)系客服。電話(huà):028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來(lái)源: 創(chuàng)新互聯(lián)