【发布时间】：2021-03-20 19:50:30
【问题描述】：
我试图弄清楚如何让三个用户访问我创建的 Web 应用程序。我希望有一个管理员用户、学生用户和公共用户。每个用户的导航栏中都有一组不同的页面。我已经能够为学生用户和公共用户设置导航，但我正在努力弄清楚如何添加管理员用户并在导航栏中为管理员用户配置特定页面。下面是代码：
App.js：
{/* using authcontext from the context api */}
export const authContext = createContext();
{/* hold the object for the authentication value */}
function ProvideAuth({ children, auth, setisAuth }) {
const authValue = {
auth,
setisAuth
};
return (
<authContext.Provider value={authValue}> {/* calling value from context api */}
{children}
</authContext.Provider>
);
}
function App() {
let isLoggedIn = localStorage.getItem('isauthenticated');
{/* setting the state of isauth to the variable isLoggedin */}
const [isAuth,setisAuth] = useState(isLoggedIn);
// const isLoggedIn = localStorage.getItem('isauthenticated');
// let isLoggedIn;
// useEffect(() => {
// isLoggedIn = localStorage.getItem('isauthenticated');
// })
return (
<ProvideAuth auth={isAuth} setisAuth={setisAuth}>
<Router>
<Navbar />
<Switch>
<Route path="/" exact component={Home}/>
<Route path="/login" exact component={Login}/>
{/* { isLoggedIn != "true" ? (<Route path="/login" exact component={Login}/>) : <></> } */}
<Route path="/sign-up" exact component={SignUp}/>
<PrivateRoute path="/virtual-trip" exact component={VirtualTrip} isAuth={isAuth}/>
<PrivateRoute path="/step1" exact component={Step1} isAuth={isAuth}/>
<PrivateRoute path="/step2" exact component={Step2} isAuth={isAuth} />
<PrivateRoute path="/step3" exact component={Step3} isAuth={isAuth}/>
<PrivateRoute path="/step4" exact component={Step4} isAuth={isAuth}/>
{/* <PrivateRoute path="/busconvo" exact component={BusConversation} isAuth={isAuth}/> */}
<PrivateRoute path="/complete" exact component={CompleteTrip} isAuth={isAuth}/>
<Route path="/contact" exact component={Contact}/>
<Route path="/resources" exact component={Resources} isAuth={isAuth}/>
<Route path="/forgotPassword" exact component={ForgotPassword}/>
{/* <PrivateRoute path="/profile" component={Profile} /> */}
<Route path="/resources" exact component={Resources}/>
<Route path="/about-me" exact component={AboutMe}/>
<PrivateRoute path="/scheduler" exact component={Scheduler} isAuth={isAuth}/>
<PrivateRoute path="/profile" exact component={Profile} isAuth={isAuth}/>
<Route path="/recruitment" exact component={Recruitment}/>
<Route path="/field-school" exact component={FieldSchool}/>
<Route path="/Home2" exact component={Home2}/>
<Route path="/video1" exact component={Video1} isAuth={isAuth} />
<Route path="/video2" exact component={Video2} isAuth={isAuth}/>
<Route path="/video3" exact component={Video3} isAuth={isAuth}/>
<Route path="/video4" exact component={Video4} isAuth={isAuth}/>
<Route path="/video5" exact component={Video5} isAuth={isAuth}/>
<Route path="/video6" exact component={Video6} isAuth={isAuth}/>
<Route path="/video7" exact component={Video7} isAuth={isAuth}/>
<Route path="/video8" exact component={Video8} isAuth={isAuth}/>
<Route path="/video9" exact component={Video9} isAuth={isAuth}/>
<Route path="/taxiconvo" exact component={TaxiConversation} isAuth={isAuth}/>
<Route path="/busconvo2" exact component={BusConvo2} isAuth={isAuth}/>
<Route path="/student-scheduler" exact component={StudentScheduler} isAuth={isAuth}/>
<Route path="/busconvo2spanish" exact component={BusConvo2Spanish} isAuth={isAuth}/>
<Route path="/taxiconvospanish" exact component={TaxiConversationSpanish} isAuth={isAuth}/>
<Route path="/resetPassword/:email/:token" exact component={ResetPassword}/>
<PrivateRoute path="/logout" exact component={Logout}/>
{/* <Route path="/Video" exact component={Video}/> */}
{/* { isLoggedIn == "true" ? (<PrivateRoute path="/virtual-trip" exact component={VirtualTrip}/>) : <></> } */}
<Route path="/resetPassword/:email/:token" exact component={ResetPassword}/>
</Switch>
</Router>
</ProvideAuth>
);
}
export default App;
Login.js
const login = () => {
Axios({
method: "POST",
data: {
username: loginUsername,
password: loginPassword,
},
withCredentials: true,
url: "http://localhost:4000/login",
}).then((res) => {
console.log(res);
setError(res.data);
//Redirecting to home after successful authentication
if(res.data === "Successfully authenticated!"){
{/* setting the local storage item to true */}
localStorage.setItem('isauthenticated', true);
{/* changing the global state to true as well */}
auth.setisAuth(true);
history.push("/");
// window.location.reload(false);
}
});
};
Logout.js
const logout = () => {
{/* removing the item from local storage */}
localStorage.removeItem('isauthenticated');
{/* setting global state to false because you're logged out */}
auth.setisAuth(false);
history.push("/");
// window.location.reload(false);
}
Navigation.js
<nav className="navbar">
<div className = "navbar-container">
<Link to="/" className="navbar-logo" onClick={closeMobileMenu}>
WAYNE STATE UNIVERSITY
</Link>
<div className='menu-icon' onClick={handleClick}>
<i className={click ? 'fas fa-times' : 'fas fa-bars'} />
</div>
<ul className={click ? 'nav-menu active' : 'nav-menu'}>
<li className='nav-item'>
<Link to='/recruitment' className='nav-links' onClick={closeMobileMenu}>
About
</Link>
</li>
<li className='nav-item'>
<Link to='/contact' className='nav-links' onClick={closeMobileMenu}>
Contact
</Link>
</li>
{ !auth.auth ? ( <li className='nav-item'>
<Link to='/sign-up' className='nav-links' onClick={closeMobileMenu}>
Sign-Up
</Link>
</li> ) : <></> }
{ !auth.auth ? ( <li className='nav-item'>
<Link to='/login' className='nav-links' onClick={closeMobileMenu} >
Login
</Link>
</li> ) : <></>}
{ auth.auth ? ( <li className='nav-item'>
<Link to='/virtual-trip' className='nav-links' onClick={closeMobileMenu}>
Virtual Trip
</Link>
</li> ) : <></> }
{ auth.auth ? ( <li className='nav-item'>
<Link to='/resources' className='nav-links' onClick={closeMobileMenu}>
Resources
</Link>
</li> ) : <></> }
{ auth.auth ? ( <li className='nav-item'>
<Link to='/scheduler' className='nav-links' onClick={closeMobileMenu}>
Scheduler
</Link>
</li> ) : <></> }
<li className='nav-item'>
<Link to='/about-me' className='nav-links' onClick={closeMobileMenu}>
About Director
</Link>
</li>
{ auth.auth ? ( <li className='nav-item'>
<Link to='/' className='nav-links' onClick={logout}>
Logout
</Link>
</li> ) : <></> }
{ auth.auth ? ( <li className='nav-item'>
<Link to='/profile' className='nav-links' onClick={closeMobileMenu}>
<i className="fas fa-user"></i>
</Link>
</li> ) : <></> }
</ul>
</div>
</nav>
【问题讨论】：
标签： javascript reactjs web-applications enums react-router