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
  }

Это работает, но мне кажется, что это очень плохая схема, так как я хочу установить заголовки авторизации с токеном авторизации только один раз, когда приложение перезагружается. Как бы вы достигли этого более правильным способом?

0 ответов

Другие вопросы по тегам