Как добавить функцию IsLoggedIn в React и менять панели навигации каждый раз, когда пользователь входит в систему?
Привет, ребята, я получил следующий код в моем файле App.js:
const history = createHistory();
function App({ calendarStore }) {
const [isLoggedIn, setIsLoggedIn] = useState(
!!localStorage.getItem("isLoggedIn")
);
return (
<div>
<Router history = {history}>
<Navbar bg = "primary" expand = "lg" variant = "dark">
<Navbar.Brand href = "/">Home</Navbar.Brand>
<Navbar.Toggle aria-controls = "basic-navbar-nav" />
<Navbar.Collapse id = "basic-navbar-nav">
<Navbar.Brand href = "/">About Us</Navbar.Brand>
<Navbar.Brand href = "/register">Register</Navbar.Brand>
<Navbar.Brand href = "/login">Login</Navbar.Brand>
</Navbar.Collapse>
</Navbar>
<Route
path = "/"
exact
component = {props => (
<HomePage {...props} calendarStore = {calendarStore} />
)}
/>
<Route
path='/login'
exact
component = {login}
/>
<Route
path='/register'
exact
component = {register}
/>
</Router>
</div>
);
}
export default App;
Я блуждал, как я могу прикрепить значение LoggedIn внутри своего кода, чтобы, если пользователь не был зарегистрирован, он мог видеть только страницу регистрации и входа, а когда он входит в систему, он может видеть только домашнюю страницу из панели навигации.
Ответы 3
Взгляните на условный рендеринг https://reactjs.org/docs/conditional-rendering.html
{isLoggedIn && <Navbar.Brand href = "/">Home</Navbar.Brand>} // show only if logged in
<Navbar.Toggle aria-controls = "basic-navbar-nav" />
<Navbar.Collapse id = "basic-navbar-nav">
<Navbar.Brand href = "/">About Us</Navbar.Brand>
{!isLoggedIn && <Navbar.Brand href = "/register">Register</Navbar.Brand>} // show only if not logged in
{!isLoggedIn && <Navbar.Brand href = "/login">Login</Navbar.Brand>}
Вы всегда можете использовать функцию useState в реакции, например:
const [loggedIn, setLoggedIn] = useState(false)
а затем внутри возврата компонента
{loggedIn ? <NavbarLoggedIn /> : <Navbar />}
Вы также можете использовать инструментарий Redux для глобальных состояний, это было бы лучшим решением, если честно, но да, это основной способ реализации этого
я добавил его в свой код, но он не сработал, он по-прежнему показывает мне регистрацию/вход в систему на моих панелях навигации, когда пользователь входит в систему
Таким образом, в основном, этот код зависит от зарегистрированной навигации и обычной навигации, являющихся двумя разными компонентами, но, похоже, он должен дать вам представление о том, как выбрать, хотите ли вы отображать разные компоненты, зависит от состояния...
Оба приведенных выше ответа верны в том смысле, что вы можете использовать условный рендеринг, чтобы гарантировать, что страница не отображает компонент в зависимости от того, вошел ли пользователь в систему или нет.
Однако это не мешает людям получить доступ к маршруту, введя его в браузер.
Вы должны проверить частные маршруты из React-Router-Dom V6, это гарантирует, что даже если случайно, ссылка на страницу регистрации не будет доступна тем, кто уже зарегистрировался.
Просто добавлено, чтобы люди не могли создавать несколько учетных записей и т. д.
Как использовать приватный маршрут в react-router-dom@v6
Редактировать: вы можете использовать useEffect для обнаружения объекта (если он сохранен в LS), а затем установить состояние слишком true, если оно существует.
useEffect(() => {
if (localStorage.getItem("isLoggedIn")){
setIsLoggedIn(true)
} else {
setIsLoggedIn(false)
}
})
Это проверит, существует ли localStorage.getItem("isLoggedIn"), а затем установит для состояния loggedIn значение true, если оно найдено, иначе оно останется ложным.
Я бы установил начальное состояние
const [isLoggedIn, setIsLoggedIn]=useState(false)
я использовал приведенные выше ответы, но моя панель навигации вообще не изменилась, когда я вошел в систему со своими учетными данными и с токеном
Это работает, если вы не входите в систему?
нет, даже если я войду или нет, панели навигации останутся прежними, не знаю, почему
Если вы используете console.info(isLoggedIn), что он возвращает?
он возвращает ноль, в основном проблема в том, что я беру пользовательский токен, когда он вошел в систему, поэтому мне нужно проверять состояние токена каждый раз, когда пользователь входит в систему. У вас есть идеи, как это сделать? Я пришел из Vue, и для этой работы был магазин.
Почему бы и нет, проверьте, существует ли токен пользователя, и если он существует, просто установите состояние как логическое значение true. Этого можно добиться с помощью хука useEffect, который запускается сразу после вызова компонента.
можешь сделать мне пример плз? я новичок в реакции и понятия не имею
я видел ответ, я думаю, он правильный, но я хочу искать токен, а не состояние isLoggedIn, поэтому, когда я нажимаю выход, он отклоняет токен
я попробовал ваш код, но он вообще не изменил мою панель навигации. Пользователь по-прежнему может видеть Регистрация/Вход