Начальная загрузка без сохранения состояния с помощью React с перенаправлением токена
то, что я пытаюсь достичь, просто - это: 1: загрузить index.html> проверить токен если токен перенаправляется на панель управления если нет, то визуализируйте логин
все является объектно-ориентированным json, поэтому состояние определяется событиями, а не приложениями. Потому что я хочу запустить это как службу процесса, а не как веб-приложение.
Я бы хотел использовать React-Redux, но, конечно, у этих фреймворков есть острая необходимость импортировать дерьмо, которое не используется сразу, что мне кажется довольно неолитическим. Если мне это не нужно, не импортируйте. После запуска события импортируйте то, что мне нужно.
Любые идеи? (ps Я пришел из angular 1.5 в первую очередь, и я могу легко сделать это в Angular, но не смог обдумать это в реакции).
Ответы 2
Откуда этот токен? Это вызов AJAX или он у вас уже есть?
токен находится в sessionStorage. если он существует, то у меня (в angular) уже есть навигационный JSON-документ, поэтому мне не нужны маршруты. В Angular мне (всегда) нужен только один маршрут /:module' which loads views / module.html`, а затем, в зависимости от того, что это за модуль, я (уже) вернул вложенный документ JSON этого объекта, то есть: панель управления, пользователи, проекты, продукты, или что у тебя.
Так нельзя ли просто создать условный рендеринг внутри компонента более высокого порядка? Допустим, у вас есть компонент приложения и внутри рендера вы делаете: render () {return sessionStorage.get ("token")? <Панель управления />: <Вход />}
с этого момента я просто создаю страницу, избегая частичных данных и компилирую результат - используя документ json для визуализации свойств, которые должны - теоретически работать нормально для реакции, но, конечно, нет, это не так.
Я перепробовал все варианты вариантов. Я нахожу логику Front-end разработки: «Эй, давайте все жестко закодируем и назовем это программированием!» Я являюсь специалистом по операциям с серверной системой. Я могу сгенерировать правила в базе данных, отобразить документы в формате json и просто передать это переднему концу. Передняя часть либо A: имеет документ json, а затем динамически строит себя, либо B : нет документа json, а значит, это страница входа. Это не должно быть хирургическим вмешательством на головном мозге.
До завершения тестов должна быть необходимость в рендере. Тест 1: существует ли токен в sessionStorage? да -> затем перенаправьте на панель управления, если пользователь не щелкнул модуль в навигации, затем получите этот объект JSON с сервера, теперь создайте страницу. нет -> ну ладно тогда. нет состояния, ничего. просто загрузите красивую статическую html-страницу с логином, и событие «submit» теперь - это то, как мы загружаем первый json-документ, навигацию, стили, контент и т. д. - один раз.
Взгляните на этот код. Это мое предложение для этого случая. codeandbox.io/s/ypn7546lkx
@DanielStoyanoff. Ваше здоровье! наконец-то! решение без гражданства. :) спасибо приятель. Зависимости от внедрения классов и состояния слишком раздуты. Попытка заставить внешний интерфейс делать то, что уже делает сервер, всегда казалась мне обратной логикой, а не соответствием тому, что на самом деле является природой программирования. :). Это решение - единственное решение! ваше здоровье!
Использование Redux здесь - адекватный выбор. Вам также следует подумать об использовании React Router.
Однако, как минимум, то, о чем вы просите, довольно просто. Вам просто нужен какой-то способ условного рендеринга.
// mock sessionStorage due to sandbox
const mockSessionStorage = { token: true }
const MainPage = () => <h1>Main Page</h1>
const Login = () => <h1>Login</h1>
const AUTHENTICATING = 0
const AUTHENTICATED = 1
const NOT_AUTHENTICATED = 2
const App = ({ authState }) => {
switch (authState) {
case AUTHENTICATED:
return <MainPage />
case NOT_AUTHENTICATED:
return <Login />
}
return <h1>Loading...</h1>
}
const render = (authState) => {
ReactDOM.render(
<App authState = {authState} />,
document.getElementById('root'))
}
const getAuthentication = () => {
if (mockSessionStorage.token) {
return render(AUTHENTICATED)
}
render(NOT_AUTHENTICATED)
}
render(false)
setTimeout(getAuthentication, 5000)<script src = "https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id='root' />это похоже на все примеры, которые я рассмотрел на предмет реакции. у него есть `` const MainPage = () => <h1> Main Page </h1> const Login = () => <h1> Login </h1> `` нет реального примера 'эй мы понятия не имеем, что получаем. Похоже, что реакция слишком сильно зависит от жесткого кодирования всего, вместо того, чтобы просто возвращать случайные результаты, которые определяются только после того, как пользователь вошел в систему.
Если честно, я просто вернусь к простому и несложному подходу angular 1.5. Мне не нужно ничего жестко кодировать, и я могу просто собрать и скомпилировать во время выполнения, а не раздувать браузер ненужной хренью.
Что жестко запрограммировано? Компонент для MainPage и тому подобное оставлены вам в качестве упражнения, чтобы заполнить его соответствующим содержимым. Этот контент, конечно, можно получить через AJAX после загрузки компонента MainPage. Это та часть, с которой вам нужна помощь? Потому что вы спросили совсем не об этом. И если вам нужен AngularJS, не стесняйтесь его использовать - мы здесь не для того, чтобы убеждать вас в обратном.
поместите это как комментарий, а не как ответ.