I have created 2 js files in the server. One is for guests of the site, the other is for an authorized user. That is, roughly 2 applications, in each router and pages. In html I only have 1 file connected. It is rendered:

<body> <div id="app"></div> <script> window.onload = function func(){ function isAuthorized(){ return document.cookie.indexOf('cookie')===0; } if(isAuthorized()) { var s = document.createElement("script"); s.src = "app2.js"; s.id = "index_js"; document.getElementById("app_container").innerHTML = ""; document.getElementById("app_container").appendChild(s); } } </script> <div id="app_container"> <script id="index_js" src="app.js"></script> </div> </body>

I thought to switch between these files using the check for the presence of cookies that the user receives during authorization. To this end, wrote a script that works when the page loads (you can see it above). However, it works clumsily and it seems to me that the reactor should have the means to work with such things. Please tell me how best to make such a transition?

  • one
    Store the authorization flag in the store and output either one component or another in the root render() or not? - Nofate ♦
  • store-do you mean the concept of Redux? I did not use it ( - Iga
  • Well in state root element. - Nofate ♦
  • I do not have a root element. There are 2 similar .js and all. Do you mean to write some kind of file-parent in which to import app1 and app2, do it check and throw one of them, depending on the flag? - Iga
  • Yes, sort of. - Nofate ♦

2 answers 2

Write one parent component. And check authorization in the main component in componentDidMount if you are not using flux

 componentDidMount() { this.setState({isAuthorized: document.cookie.indexOf('cookie')===0}); }

And in the render show this or that depending on the value of this.state.isAuthorized

  • got the idea. there was such a question. In the main file of each of the 2 components there are routers that are connected as it says github.com/ReactTraining/react-router, that is, the router of each component refers to the same div in the render. as in my case, when it is necessary to substitute one or another component of them, because the parent component, where I will do the check and substitution will refer to the same div as both routers - Iga

Fiddling with all this disgrace, I picked up the documentation of the router and found the onEnter method there. He can let the user or not let on certain pages depending on whether he logged in or not. I made 1 router in which I registered the ruts on the application pages. With user authentication, if successful, the following occurs:

 onSuccess: function (data) { const token = config.tokenName window.localStorage.setItem('token', token); this.context.router.push("/main"); },

in the file with the router itself did the following function:

 function authCheck(nextState,replace) { const token = window.localStorage.getItem('token') if (token === 'my_token') { } else { replace('/'); } }