#javascript #reactjs #authentication #redirect
Вопрос:
Привет, я хочу создать небольшую систему всплывающих окон, в которой, если пользователь не вошел в систему, нажимая на свою коллекцию, он перенаправляется на страницу входа в систему с состоянием (LoggedIn), на котором я хочу основывать отображение всплывающего окна, а также удалить состояние после его выполнения всплывающего окна, чтобы оно не выполнялось всегда при перезагрузке страницы. На данный момент это «вроде» работает, но, например, когда я перезагружаю страницу по URL-адресу с помощью ?logged=false, это всегда будет выводить всплывающее окно, и я бы этого не хотел. Также теперь, если кто-то выйдет из системы (так что текущий пользователь изменится), он также перенаправится на ?logged=ложный путь и отображение всплывающего окна, идентификатор которого лучше перенаправить на /войти без всплывающего окна. Вот мой код:
login.js
const location = useLocation();
const notify = () =>
toast.error("You must be logged in to view your collection!", {
position: "bottom-center",
autoClose: 5000,
hideProgressBar: false,
closeOnClick: true,
pauseOnHover: true,
draggable: true,
progress: undefined,
});
useEffect(() => {
const queryParams = new URLSearchParams(location.search);
if (queryParams.has("logged")) {
notify();
}
}, []);
return (
<>
{location.search ? (
<ToastContainer
position="bottom-center"
autoClose={5000}
hideProgressBar={false}
newestOnTop={false}
closeOnClick
rtl={false}
pauseOnFocusLoss
draggable
pauseOnHover
/>
) : (
null
)}
rest of the login form...
usercollection.js
return (
<>
{currentUser === null ? (
<Redirect
to={{
pathname: "/login",
state: { loggedIn: "false" },
search: "?logged=false",
}}
/>
) : (
<>
rest of the collection code...
Комментарии:
1. как вы поддерживаете состояние входа в систему? вы используете redux или контекстный api? В любом случае, чтобы избежать отображения всплывающего окна каждый раз, вам необходимо изменить массив зависимостей useEffect с состоянием входа в систему, чтобы он выполнялся только тогда, когда пользователь не вошел в систему
2. я проверял, действует ли состояние и текущий пользователь, а затем уведомляю, это работает, но каждый раз, когда я выхожу из системы на странице сбора, она перенаправляет меня на ? logged=ложь и отображение всплывающего окна. Должен ли я использовать контекст/редактирование, чтобы мое приложение работало?
3. Я бы предложил построить логику на основе состояния входа в систему(api conext), а не параметров запроса
Ответ №1:
Предположим, у вас есть какой-то компонент, который поддерживает как пользователя, вошедшего в систему, так и пользователя, не вошедшего в систему.
const CollectionPublic = () => {
return "Public Collection Content"
}
const CollectionPrivate = () => {
return "Private Collection Content"
}
А затем ваш маршрут предполагает отправить пользователя в нужное место.
<Route path="/collection" render={props =>
user ? <CollectionPublic /> : <CollectionPrivate />
}/>
Теперь речь идет о том, как создать пользователя и отправить его по маршруту. Существует множество способов, но предположим, что пользователь создан с учетом контекста.
const UserContext = React.createContext({
user: null,
login: () => {}
})
Как только вы предоставите этот контекст остальной части приложения, например, в приложении.
const App = () => {
...
// logic about how to come up with user and login
return (
<UserContext.Provider value={{user, login}}>
// all your routes or whatever
</UserContext.Provider
)
}
Если какой-либо компонент хочет получить доступ к информации о пользователе, вы можете
const CollectionPublic = () => {
const { login } = useContext(UserContext)
const onClick = () => {
// either redirect to login page or
login()
}
return <button onClick={onClick}>content private</button>
}
Просто идея. Обычно любая аутентификация, созданная для react, должна выдавать что-то подобное.