react-router redux how can i update state on load of page for authentication -

i using https://github.com/davezuko/react-redux-starter-kit starter kit , trying introduce authentication starter app.

i have authentication working, sets state.auth on login success, have onenter on protected routes calls isauthenticated() check if user authenticated.

this lost , not sure how check both state.auth.user , localstorage.token make sure things set.

the way see it, need account 2 cases

1. the user logged in, refreshed page. means token still in localstorage state wiped, i'd need reload state decoding token , reinjecting state.auth.user
2. the user isn't logged in, redirect them route /auth/login (this part have working).

my problem using starter kit not know how properly state/store within routes file can check state.auth.user property.. or if thats right way (maybe should using action instead)?

redux/modules/auth.js

import { createaction, handleactions } 'redux-actions'; import { pushpath } 'redux-simple-router' // ------------------------------------ // constants // ------------------------------------ export const login_request = 'login_request'; export const login_success = 'login_success'; export const login_failure = 'login_failure'; export const store_user = 'store_user'; export const is_authenticated = 'is_authenticated';  const initialstate = {   isfetching: false,   isauthenticated: false,   user: {},   token: '' };  // ------------------------------------ // actions // ------------------------------------ export const requestlogin = createaction(login_request, (payload) => payload); export const receivelogin = createaction(login_success, (payload) => payload); export const invalidlogin = createaction(login_failure, (payload) => payload);  export const isauthenticated = () => {   return !!gettoken(); };  const gettoken = () => {   return localstorage.token; };  const _decodetoken = (token) => {   return window.atob(token.split('.')[1]); };  const storetoken = (token) => {   localstorage.token = token; };  export const dologin = (identity, password) => {   return (dispatch, getstate) => {     dispatch(requestlogin({ identity, password }));     // mock backend call     settimeout(function () {       var token = 'eyj0exaioijkv1qilcjhbgcioijiuzi1nij9.eyj1c2vybmftzsi6imfkbwluiiwizmlyc3royw1lijoiqwrtaw4ilcjsyxn0tmftzsi6imlzdhjhdg9yiiwizw1hawwioijhzg1pbkbhenn1chjhcy5jb20ilcjjcmvhdgvkqxqioiiymde1lteyltmwvdixojmyojixljm1nloilcj1cgrhdgvkqxqioiiymde1lteyltmwvdixojmzoje3ljqzmloilcjpzci6iju2odq0zdy1y2uzmjeyztuwmwe3zmnmnyisimlhdci6mtq1mtuxnju5n30.qpdmsnpmahzy4qits5ibphpiener7qhksfwzsvulwc8';       storetoken(token);       dispatch(receivelogin({ user: { username: 'admin', uid: 1 }, token }));       dispatch(pushpath('/'));     }, 3000);   }; };  export const actions = {   dologin,   isauthenticated };  // ------------------------------------ // reducer // ------------------------------------ export default handleactions({   [login_request]: (state, { payload }) => {     return {       ...state,       isfetching: true,       isauthenticated: false     };   },   [login_success]: (state, { payload }) => {     return {       ...state,       isfetching: false,       isauthenticated: true,       token: payload.token,       user: payload.user     };   },   [login_failure]: (state, { payload }) => {     return {       ...state,       isfetching: false,       isauthenticated: false,       message: payload     };   } }, initialstate); 

routes/index.js

import { route, indexroute } 'react-router';  // note: here we're making use of `resolve.root` configuration // option in webpack, allows specify import paths if // root of ~/src directory. makes // easy navigate files regardless of how nested // current file is. import corelayout 'layouts/corelayout'; import authlayout 'layouts/authlayout';  import homeview 'views/homeview'; import loginview 'views/auth/loginview';  import { actions authactions } '../redux/modules/auth';  function isauthenticated (nextstate, replacestate) {   if (authactions.isauthenticated()) {     replacestate({ nextpathname: nextstate.location.pathname }, '/auth/login');   } }  export default (<route>   <route path='/' component={corelayout} onenter={isauthenticated}>     <indexroute component={homeview} />     <route path='/panel' name='panel' component={homeview} />   </route>   <route path='/auth' component={authlayout}>     <route path='login' component={loginview} />   </route> </route>); 

i have been using solution https://github.com/davezuko/react-redux-starter-kit

1. create authenticatedcomponent https://github.com/joshgeller/react-redux-jwt-auth-example/blob/master/src/components/authenticatedcomponent.js

2. config router component require authen: https://github.com/joshgeller/react-redux-jwt-auth-example/blob/master/src/routes/index.js

3. check token (page loading): https://github.com/joshgeller/react-redux-jwt-auth-example/blob/master/src/index.js