how can i make user enter home page without login and to access any thing must login useing json server in React js

Question

i want when user enter my website see posts but can't add or edit or delelte and when he login return into home page and have all accsess using Json server in React js

const ProceedLogin = (e) => {
    e.preventDefault()
    if (validation()) {
        const axiosFunction = async () => {
            try {
                const axiosRes = await axios.get(`http://localhost:3000/user/${username}`)

                console.log(axiosRes.data);
                const data = axiosRes.data
                if (Object.keys(data).length === 0) {
                    toast.error("enter valid user")
                } else {

                    if (data.password === password) {

                        toast.success("okkk success")
                        navigate("/")
                    } else {
                        toast.error("enter valid password")



                    }
                }
            } catch (err) {
                console.log(err);

                toast.error("user not exist")
            }

        }
        axiosFunction()
    }
} that is my code in login component

Answer 1

When anyone try to add , edit or delete post check that user is logged in or not . if that user is already login than allow him to add , edit or delete post otherwise redirect him to login page.

you should store user authtoken when user signup/login. in react you can store authtoken in localstorage or session.

localStorage.setItem('token',login.token);

login.token = Your authtoken

now you can check this in your add , delete ,edit post function that user is logged in or not using localstorage.getItem().

//Add post
 const addpost=(e)=>{
    e.preventDefault();
    if(localStorage.getItem('token'))
    {
        //code to add post
    }
    else{
        alert('you need to login to add post');
        navigate('/Login');
        //Redirect to login page using react usenavigate() Hook
    }

  }