Redux-Persist, Axios, установка токена авторизации приложения и перенаправление пользователя туда, где он ранее оставался
Я использую реагировать нативно с Redux для создания мобильного приложения. Когда пользователь убивает приложение и затем позже возвращается в приложение, я хочу, чтобы он оказался на странице, на которой он ранее ушел, и не прошел процесс входа в систему, если его токен все еще действителен.
Вот как я настроил свой магазин:
import { createStore, compose, applyMiddleware } from 'redux';
import ReduxThunk from 'redux-thunk';
import reducers from '../reducers';
import { persistStore, autoRehydrate, persistReducer } from 'redux-persist';
import { AsyncStorage } from 'react-native';
import autoMergeLevel2 from 'redux-persist/lib/stateReconciler/autoMergeLevel2';
import axios from 'axios';
const persistConfig = {
key: 'root',
storage: AsyncStorage,
stateReconciler: autoMergeLevel2,// see "Merge Process" section for details.
blacklist: ['error', 'loading', 'backgroundImage']
};
const pReducer = persistReducer(persistConfig, reducers);
export const store = createStore(
pReducer,
{},
compose(
applyMiddleware(ReduxThunk)
)
);
export const persistor = persistStore(store);
и вот мой компонент приложения:
import { persistor, store } from './src/store'
export default class App extends React.Component {
render() {
return (
<Provider store={store}>
<PersistGate persistor={persistor}>
<Router />
</PersistGate>
</Provider>
);
}
}
Я решил проверить регидратированное состояние в маршрутизаторе и соответственно установить свой начальный вид.
Вот мои сцены:
<Scene key='chrono' hideNavBar component={Starter} initial={ this.props.initialPage == 'chrono' }/>
<Scene key='time' hideNavBar title='TIME' component={TimeCardList} icon={ChronoIcon} initial={ this.props.initialPage == 'time'}/>
<Scene key='client' hideNavBar title='CLIENT' component={ClientList} icon={TabIcon} initial={ this.props.initialPage == 'client'}/>
<Scene key='projects' hideNavBar title='PROJECT' component={ProjectList} icon={TabIcon} initial={ this.props.initialPage == 'projects'}/>
<Scene key='info' hideNavBar title='INFO' component={Info} icon={TabIcon} initial={ this.props.initialPage == 'info'}/>
и вот что происходит в mapStateToProps в маршрутизаторе:
let initialPage = 'login'
if (state._persist){
if (state._persist.rehydrated && state.authentication.token){
API.defaults.headers.common['Authorization'] = 'Bearer ' + state.authentication.token;
console.log('fu')
initialPage = state.tabs.activeTab
}
}
return {
initialPage: initialPage
}
Это работает, но мне кажется, что это очень плохая схема, так как я хочу установить заголовки авторизации с токеном авторизации только один раз, когда приложение перезагружается. Как бы вы достигли этого более правильным способом?