Question

我获得了新的React Temaplate，并在2周前开始了基于角色的注册系统项目。当我将旧的前端代码移至新模板时，我在边栏中显示基于角色的dashbaord和某些基于角色的菜单时遇到一些问题。因此，我将向您展示我的新旧布局代码。（每个用户都有role_id，例如admin的role_id为2或教师的role_is为4）有人可以帮助我吗？

这是我以前的前端侧边栏菜单列表

                {localStorage.getItem('role_id') == 3?<li className="nav-item">
                <Link to='/operatordashboard'><a className="nav-link">
                  Dashboard
                </a></Link>
                </li>:''}
                {localStorage.getItem('role_id') == 2?<li className="nav-item">
                <Link to='/admindashboard'><a className="nav-link">
                  Dashboard
                </a></Link>
                </li>:''}
                {localStorage.getItem('role_id')==1? <li className="nav-item">
                  <Link to='/schools'><a className="nav-link" data-toggle="tab" href="#tab1" role="tab">
                    Schools
                  </a></Link>
                </li>:''}
                 {localStorage.getItem('role_id') == 2? <li className="nav-item">
                 <Link to='/branchs'><a className="nav-link" data-toggle="tab" href="#tab2" role="tab">
                    Branch
                  </a></Link>
                </li>:''}  

                {localStorage.getItem('role_id') == 1 || localStorage.getItem('role_id') == 2 || localStorage.getItem('role_id') == 3? 
                <li className="nav-item">
                  <Link to='/lessons'><a className="nav-link" data-toggle="tab" href="#tab2" role="tab">
                    Lessons
                  </a></Link>
                </li>:''}

这是我新模板的布局侧边栏（用于映射路由器）

                                                        return (
                                                            <li className={this.activeRoute(prop.path) + ' sidebar-item'} key={key} >
                                                                <span data-toggle="collapse" className="sidebar-link has-arrow" aria-expanded={this.state[prop.state]} onClick={() => this.setState(seconddd)} >
                                                                    <i className={prop.icon} />
                                                                    <span className="hide-menu">{prop.name}</span>
                                                                </span>
                                                                {/*--------------------------------------------------------------------------------*/}
                                                                {/* Sub-Menus wiil be goes here                                                    */}
                                                                {/*--------------------------------------------------------------------------------*/}
                                                                <Collapse isOpen={this.state[prop.state]}>
                                                                    <ul className="second-level">
                                                                        {prop.subchild.map((prop, key) => {
                                                                            if (prop.redirect) return null;
                                                                            return (
                                                                                <li className={this.activeRoute(prop.path) + ' sidebar-item'} key={key} >
                                                                                    <NavLink to={prop.path} activeClassName="active" className="sidebar-link">
                                                                                        <i className={prop.icon} />
                                                                                        <span className="hide-menu">{prop.name}</span>
                                                                                    </NavLink>
                                                                                </li>
                                                                            );

                                                                        })}
                                                                    </ul>
                                                                </Collapse>
                                                            </li>
                                                        );

Answer 1

反应路由器在反应开发人员中是如此重要。因此，您需要从其他react.js网站进行研究。我建议您访问此网站！

https://react-mongolia.netlify.com/react-router-dom

反应基于角色的授权和路由器

1 个答案: