joshgeller / react-redux-jwt-auth-example

Sample project showing possible authentication flow using React, Redux, React-Router, and JWT
MIT License
1.58k stars 237 forks source link

comparison to use of "onEnter" #6

Open tony-kerz opened 8 years ago

tony-kerz commented 8 years ago

hi josh,

thanks for the example!

wondering if you can contrast your approach to that suggested by the rackt guys:

http://stackoverflow.com/a/32905508/2371903 https://github.com/rackt/react-router/tree/master/examples/auth-flow

best, tony.

mjrussell commented 8 years ago

@tony-kerz the example you link using onEnter will not work when you want to check some information against a redux store, hence the reason for using the willMount/willReceive lifecycle method approach.

React-Router is used in non-redux apps, so they dont offer up a way to take advantage of the store.

The only other way I know of to access the store in onEnter is with this type of approach: https://github.com/CrocoDillon/universal-react-redux-boilerplate/blob/master/src/routes.jsx

weblancaster commented 8 years ago

Hey @mjrussell I'm using onEnter and works fine, I just call isAuthenticated function on onEnter={isAuthenticated} and there I get the store state as so store.getState() then I check if not authenticated and redirect to login.

mjrussell commented 8 years ago

onEnter works fine provided you have access to the store. Typically components in redux do not have an instance of the store except through the react-redux connect function. Im sure you can do a number of different ways to pass down the store to your onEnter though

tony-kerz commented 8 years ago

i had to use some closure trickery to have access to the store from the on-handler function, it would be nice if there was a less involved way to accomplish that.

i'm also not thrilled about the flow around diverting from a protected route, to the login, and back to the original target. i think i read somewhere that it was bad form to dispatch actions from reducers, so i handle that final transition to the original target in a state observer. a bit convoluted for my taste, but i was thinking that onEnter is idiomatic, so i was following through on that basis.

mjrussell commented 8 years ago

I included a section on contrasting the onEnter approach with a Higher Order Component approach in the motivation section of my utility library for HOC auth - https://github.com/mjrussell/redux-auth-wrapper#motivation