时间戳

首页 > 解决方案 > reactjs：如何根据后端权限显示导航项目

reactjs - reactjs：如何根据后端权限显示导航项目

问题描述

我有这个导航栏，用户可以在其中浏览网站，登录的用户可以在主页上发布帖子或在新闻页面上发布新闻帖子。但是，我在后端设置了 3 级权限，允许访问者浏览网站，然后经过身份验证的用户可以发布普通帖子或新闻帖子，但最后一个是仅管理员权限才能发布程序帖子。问题是我如何才能显示第三个按钮（用于程序发布）不显示给经过身份验证的用户，并且只在管理员登录时弹出

这些按钮可以在下面的 authLinks 代码中找到

import { Link, NavLink } from 'react-router-dom';
import { connect } from 'react-redux';
import { logout } from '../actions/auth';
import Alert from './Alert';
import PropTypes from 'prop-types';
import {Navbar, NavDropdown} from "react-bootstrap";

import Logo from '../assets/images/logo.png';

const navbar = ({ auth:{isAuthenticated, loading}, logout}) => {

  const authLinks = (
    <Fragment>
      <NavLink className='btn btn-primary btn-sm m-2' to='/create-post'>Nytt innlegg</NavLink>
      <NavLink className='btn btn-primary btn-sm m-2' to='/create-nyhet'>Nytt nyhetsinnlegg</NavLink>
      <NavLink className='btn btn-primary btn-sm m-2' to='/create-program'>Nytt arrangement</NavLink>
      <a className='btn btn-primary btn-sm m-2' onClick={logout} href='#!'>Logg ut</a>
    </Fragment>
  );

  const guestLinks = (
    <NavLink className='btn btn-primary btn-sm m-2' to='/login'>Logg inn</NavLink>
  );

  return(
    <Fragment>
      <Navbar bg="dark" variant="dark" expand="md" sticky="top">
        <div className="container-fluid">
          <Navbar.Brand href='/'><img className="img-responsive" src={Logo} width="220" height="55" alt="Sammfunnet Logo" /></Navbar.Brand>
          <Navbar.Toggle aria-controls="basic-navbar-nav" />
          <Navbar.Collapse id="basic-navbar-nav">
            <ul className="navbar-nav p-2">
              <li className="nav-item active">
                <NavLink className="nav-link" exact to='/'>Hjem</NavLink>
              </li>
              <li className="nav-item">
                <NavLink className="nav-link" exact to='/nyhet'>Nyhet</NavLink>
              </li>
              <li className="nav-item">
                <NavLink className="nav-link" exact to='/program'>Program</NavLink>
              </li>
              <NavDropdown title="Kontakt Oss" id="basic-nav-dropdown">
                <NavDropdown.Item href="/bli-frivillig">Bli Frivillig</NavDropdown.Item>
                <NavDropdown.Item href="/presse">Presse</NavDropdown.Item>
                <NavDropdown.Item href="#action/3.3">Samarbeid</NavDropdown.Item>

              </NavDropdown>

              <li className="nav-item">
                <NavLink className="nav-link" exact to='/omoss'>Om oss</NavLink>
              </li>


            </ul>
          </Navbar.Collapse>

          <span className="nav_link">
            { !loading && (<Fragment>{ isAuthenticated ? authLinks : guestLinks }</Fragment>) }
          </span>

        </div>
      </Navbar>
      <Alert />
    </Fragment>
  );
};



navbar.propTypes = {
  logout: PropTypes.func.isRequired,
  auth: PropTypes.object.isRequired
}

const mapStateToProps = state => ({
  auth: state.auth
});

export default connect(mapStateToProps, { logout })(navbar);

标签： reactjs

解决方案

这样做应该可以工作

const authLinks = (
    <Fragment>
      <NavLink className='btn btn-primary btn-sm m-2' to='/create-post'>Nytt innlegg</NavLink>
      <NavLink className='btn btn-primary btn-sm m-2' to='/create-nyhet'>Nytt nyhetsinnlegg</NavLink>
      { isAuthenticated && (<NavLink className='btn btn-primary btn-sm m-2' to='/create-program'>Nytt arrangement</NavLink> ) }
      <a className='btn btn-primary btn-sm m-2' onClick={logout} href='#!'>Logg ut</a>
    </Fragment>
  );

推荐阅读