Hide Elements If User Logged In

Hide elements if user logged in

Angular: hide element when user is logged in

I think the problem is in your isLoggedIn() method,

as i can see you set token with currentUserbut in isLoggedIn method you are checking only auth_token

so try this,

isLoggedIn() {

    if (JSON.parse(localStorage.getItem('currentUser')).auth_token == null) {
      this.isLoggedin = false;
      return this.isLoggedin;
    }
    else {
      return true;
    }
  }

PHP and jQuery: show/hide div if user logged in or not

What about this if you put your html inside php if blocks , or it is necessary to use javascript you can do it also by using only php then why adding JS

<div id="header_wrapper">
<?php 
if (!isset($_SESSION['id']) || empty($_SESSION['id'])){  ?>
<div id="loginbutton"></div>
<?php }
else {  ?>
<div id="menu">
<ul>
<li></li>
<li></li>
<li></li>    
</ul>
</div>
<?php 
}
?>
</div>

Show or hide component if user is logged in Reactjs

isAuth, token etc states can be stored in Cookie or local/session storage and state management should be done with Context API so when the page is refreshed the states are not lost

const LoginContext = createContext({isAuth:false,token : "", 
                                    setAuth: () => {}})

const LoginProvider = ({child}) => {
   const [isAuth,setAuth] = useState(localStorage.getItem("isAuth") || false)
   const [token, setToken] = useState(localStorage.getItem("token"))
   useEffect(() => {
      localStorage.setItem("isAuth",isAuth)
   },[isAuth])
   return (
        <LoginContext.Provider value={{isAuth,token,setAuth}}>
             {child}
        </LoginContext.Provider>
      )
    }

While logging in

const {isAuth, setAuth}= useContext(LoginContext)
const login = async () => {
   var result = await axios.get('http://localhost:5000/token', {withCredentials: true});
   var { data} = result.data;
   setAuth(data != null) //or conditional state

}
const logout = async () => {
   await axios.get('logout')
   setAuth(false) //or conditional state
}

LoginContext children can access context values

<LoginContextProvider>
 <Navbar />
</LoginContextProvider>

can use isAuth in navbar or other component

var {isAuth} = useContext(LoginContext)

Angular 5 Hide nav element if user is logged in

hide the content of the page if the user is not logged in

How about not printing the elements instead? Hiding the elements but still having them in the DOM makes it still available just by making the display: block.

Try wrapping the elements and only show them when the session is set, for example:

<?php
    if(isset($_SESSION['student_id'])){
        <li id="irene"class="nav-item px-3">
            <a href="requestformmanagement.php" class="nav-link text-nowrap" ><i class="fas fa-newspaper"></i> Request Form Management </a>
        </li>
    }
?>

Show/Hide elements if user is logged in?

I would suggest to add / remove the elements from DOM.

For example:
If you just hide a Button by setting it invisible for logged-off user. The evil logged-off user may make it visible with browser-development tools and will get features which are for logged-in users only.

---

Related Topics