React / Redux应用程序中的身份验证

Question

I'm relatively new to redux and basically to the concept, where front-end separated from back-end. Earlier, i used laravel and RoR frameworks, where you can actually combine front-end and back-end logic and access back-end code in views. With this approach, it's easy to handle authentication, because frameworks i mentioned above have sessions middleware which gives the possibility to retrieve authenticated user data even after page refresh.

Things changed when you're working with redux. I understand the part how to authenticate the user (basically send POST request and write data to the store), but how can i handle page refresh, so all the data gets reset by initial state of reducers?

Seems to me that the only way out is to store authenticated user in the localStorage and if it's presistent there - make it an initial state of reducer? Is it safe? Or maybe there are some best practices about this approach?

[IMPORTANT] Few words about my back-end logic:

I'm using laravel as a back-end (which basically renders react view with router, where all of the front-end logic are, if url doesn't starts with /api ).

I'm not using JWT or any token approaches, because i have access to all the default middlewares, which gives me possibility to send request with the user data and get session identifier as cookies (so each ajax request from react\\redux app gets automatically authenticated by laravel).

Answer 1

When your app loads and the redux store is initialized you can read from cookies or localStorage and pass the session ID into the preloaded state with redux's createStore .

This is enough to initially fetch the user data from the server. Typically this is an async redux action triggered by your root App component's componenWillMount .

Whenever the session ID changes, you make sure it's persisted in localStorage, cookies, or whatever you chose.

If you don't want to use preloadedState for createStore , you can also read the session ID in the initialState of the reducer responsible for auth/user data.