反应本机Redux身份验证

Question

我有一个redux应用程序，该应用程序可以很好地与react配合使用，但是我正在尝试对react native应用程序执行相同的操作。 应用程序的流程是，成功登录后，令牌将存储在异步存储中，并且用户将路由到主堆栈，如果用户关闭应用程序并重新打开它，则如果异步存储中有有效的令牌，则用户将被重定向到主目录堆栈（如果未重定向到身份验证堆栈）。

请查看我的代码：

＃useractions.js

import { SET_USER, SET_ERRORS, CLEAR_ERRORS, LOADING_UI, SET_UNAUTHENTICATED, LOADING_USER } from '../types';
import axios from 'axios';
import AsyncStorage from '@react-native-community/async-storage';

export const loginUser = (userData) => (dispatch) => {
    // dispatch({ type: LOADING_UI });
    axios.post('urllogin', userData)
    .then((res)=> {
        console.warn("res", res)
        setAuthorizationHeader(res.data.token)
        dispatch(getUserData());
        console.warn("successful login")
        // dispatch({ type: CLEAR_ERRORS });
        // props.navigation.navigate('Home');
    })
    .catch((err)=> {
        console.warn("error", err)
        dispatch({
            type: SET_ERRORS,
            payload: err.response.data
        })    
    })
}

export const getUserData = () => (dispatch) => {
    dispatch({ type: LOADING_USER });
    axios.get('urluserinfo')
    .then(res => {
        dispatch({
            type: SET_USER,
            payload: res.data
        })
    })
    .catch(err => console.log(err));

}

const setAuthorizationHeader = (token) => {
    const FBIdToken = `Bearer ${token}`
    AsyncStorage.setItem('FBIdToken', FBIdToken);
    axios.defaults.headers.common['Authorization'] = FBIdToken;
}

userReducer.js

import { SET_USER, SET_AUTHENTICATED, SET_UNAUTHENTICATED, LOADING_USER } from '../types';

const initialState = {
    authenticated: false,
    loading: false,
    credentials: {},
};

export default function(state = initialState, action){
    switch(action.type){
        case SET_AUTHENTICATED:
            return {
                ...state,
                authenticated: true
            };
        case SET_UNAUTHENTICATED:
            return initialState;
        case SET_USER:
            return {
                authenticated: true,
                loading: false,
                ...action.payload
            };
        case LOADING_USER:
            return {
                ...state,
                loading: true,
            }
        default:
            return state;

    }
}

App.js

let authenticated;
const token = AsyncStorage.getItem('FBIdToken');
if(token){
  authenticated = true;
} else {
  authenticated = false;
}

    export default function App() {

      return (
        <Provider store={store}>
        <NavigationContainer>
          { authenticated ? (
                <Drawer.Navigator drawerContent={props => <DrawerContent {...props} /> } >
                <Drawer.Screen name='MainTab' component={MainTabScreen} />
                <Drawer.Screen name='SupportScreen' component={SupportScreen} />
                <Drawer.Screen name='BookmarkScreen' component={BookmarkScreen} />
              </Drawer.Navigator>
          ) : 
          <RootStackScreen /> 
          }
        </NavigationContainer>
        </Provider>
      );
    }

signInScreen.js

import { connect } from 'react-redux';
import { loginUser } from '../redux/actions/userActions';

class SignInScreen extends Component {

    constructor(){
        super();
        this.state = {
            email: '',
            password: '',
            errors: {},
            check_textInputChange: false,
        secureTextEntry: true,
        isValidUser: true,
        isValidPassword: true,
        }
    }


    componentWillReceiveProps(nextProps){
        if(nextProps.UI.errors) {
            this.setState({ errors: nextProps.UI.errors });
        }
    }

    onChangeText = name => (text) => {
        this.setState({ [name]: text });
      }

     loginHandle = () => {
        const userData = {
            email: this.state.email,
            password: this.state.password
        };
        console.warn(userData)
        this.props.loginUser(userData);
    };

    render() {
        const { email, password } = this.state;
    return (
     <View style={styles.container}>
         <Animatable.View 
         animation="fadeInUpBig"
         style={styles.footer}
         >
             <Text style={styles.text_footer}>Email</Text>
             <View style={styles.action}>
                 <FontAwesome
                 name="user-o"
                 color="#05375a"
                 size={20}
                 />
                 <TextInput
                 placeholder="Your email"
                 style={styles.textInput}
                 autoCapitalize="none"
                //  onChangeText={(val) => this.textInputChange(val)}
                onChangeText={this.onChangeText("email")}
                value={email}
                //  onEndEditing={(e) => handleValidUser(e.nativeEvent.text)}
                 />
             </View>        
             <Text style={[styles.text_footer, {
                 marginTop: 35
             }]}>Password</Text>
             <View style={styles.action}>
                 <Feather
                 name="lock"
                 color="#05375a"
                 size={20}
                 />
                 <TextInput
                 placeholder="Your Password"
                 secureTextEntry={this.state.secureTextEntry ? true: false}
                 style={styles.textInput}
                 autoCapitalize="none"
                //  onChangeText={(val) => this.handlePasswordChange(val)}
                onChangeText={this.onChangeText("password")}
                value={password}
                 />
             </View>
             <View style={styles.button}>
             <TouchableOpacity
                style={styles.signIn}
                 onPress={() => {this.loginHandle()}}>
                 <LinearGradient
                 colors={['#08d4c4', '#01ab9d']}
                 style={styles.signIn}
                 >
                     <Text style={[styles.textSign, {
                         color: '#fff'
                     } 
                    ]}>Sign In</Text>
                 </LinearGradient>
                 </TouchableOpacity>
             </View>
         </Animatable.View >
     </View>
    )
                    }
}
const mapStateToProps = (state) => ({
    user: state.user,
    UI: state.UI,
})

const mapActionsToProps = {
    loginUser
}

export default connect( mapStateToProps, mapActionsToProps )(SignInScreen);

当前，我无法检查用户在asyncstorage中是否具有有效令牌，并且无法向用户提供主堆栈或身份验证堆栈，以及如何在成功登录后将用户重定向到主堆栈。

请帮助。