带有令牌重定向的React的无状态初始加载

时间:2018-04-04 19:09:28

标签: angular reactjs redux stateless

我想要完成的事情,简单来说就是: 1:load index.html>测试令牌 如果令牌重定向到仪表板 如果没有,那么渲染登录

一切都是json面向对象所以状态是事件驱动的,而不是应用程序驱动的。因为我想将其作为流程服务运行,而不是webApp。

我想使用React-Redux,但是当然,这些框架需要导入不会立即使用的垃圾,这对我来说似乎相当新石器时代。如果我不需要它,请不要导入它。一旦事件被触发,然后导入我需要的东西。

任何想法? (ps我主要来自棱角1.5,我可以在Angular中轻松完成这项工作,但在反应中无法绕过它)。

2 个答案:

答案 0 :(得分:0)

这个令牌来自哪里?它是AJAX调用还是你已经拥有它?

答案 1 :(得分:0)

在这里使用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)
&#13;
<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' />
&#13;
&#13;
&#13;