react-router redux如何更新頁面的身份驗證狀態

我使用https://github.com/davezuko/react-redux-starter-kit作爲初學者工具包，並嘗試將身份驗證引入啓動器應用程序。react-router redux如何更新頁面的身份驗證狀態

我有認證工作，它登錄成功設置state.auth，然後我有我的保護路由這就要求isAuthenticated()檢查，如果用戶進行身份驗證的onEnter。

這是我迷路的地方，我不知道如何檢查state.auth.user和localStorage.token以確定設置。

我看到它的方式，我需要考慮兩種情況

用戶登錄，但隨後刷新頁面。這意味着令牌仍在localStorage中，但狀態已被擦除，所以我需要重新加載狀態，方法是解密令牌並將其重新注入state.auth.user
用戶未登錄，將它們重定向到路由/auth/login（this部分我有工作）。

我的問題是使用入門工具包，我不知道如何正確地得到國家/商店內我的路線文件，以便我可以檢查該state.auth.user財產..或者如果多數民衆贊成甚至以正確的方式做它（也許我應該使用一個動作）？

終極版/模塊/ auth.js

import { createAction, handleActions } from 'redux-actions'; 
import { pushPath } from '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);

路由/ index.js

import { Route, IndexRoute } from 'react-router'; 

// NOTE: here we're making use of the `resolve.root` configuration 
// option in webpack, which allows us to specify import paths as if 
// they were from the root of the ~/src directory. This makes it 
// very easy to navigate to files regardless of how deeply nested 
// your current file is. 
import CoreLayout from 'layouts/CoreLayout'; 
import AuthLayout from 'layouts/AuthLayout'; 

import HomeView from 'views/HomeView'; 
import LoginView from 'views/auth/LoginView'; 

import { actions as authActions } from '../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>);

來源

2016-01-06 gorelative

react-router redux如何更新頁面的身份驗證狀態

回答

相關問題