CODEWITHSUNDEEP
reactjs
6rs
6rs

Reputation: 57

reactjs: how to show nav items based on backend permissions

I have this navbar where the user can navigate through the site and logged in users can make posts on the main page or news posts on the news page. However, i have 3 levels of permissions made in the backend where the visitors are allowed to navigate the website, then authenticated users can make normal posts or news posts but the last one is admin only permission to make a program post. the question is how can i show the third button (which is for program post) not show for authenticated users and only pop up when an admin logs in

these buttons can be found in the code bellow under 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);

Upvotes: 0

Views: 742

Answers (1)

Evren
Evren

Reputation: 4410

Do this then should work

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>
  );

Upvotes: 2

Related Questions