Question

我在React Native中有一个登录组件。

我使用react-navigation和redux将isLoggedIn存储在我的authReducer中。

如果用户已登录，我希望将用户从登录组件发送出去。因此，如果您已经登录，则永远不可能看到登录页面。

我想我必须像https://github.com/react-community/react-navigation/blob/master/examples/ReduxExample/src/reducers/index.js那样设置navReducer。

我不确定是什么意思

// Start with two routes: The Main screen, with the Login screen on top.
const firstAction = AppNavigator.router.getActionForPathAndParams('Main');
const tempNavState = AppNavigator.router.getStateForAction(firstAction);
const secondAction = AppNavigator.router.getActionForPathAndParams('Login');
const initialNavState = AppNavigator.router.getStateForAction(
  secondAction,
  tempNavState
);

您通常如何保护某些路线并强制用户登录？在他/她成功登录后，他/她应该被发送到另一条路线？

Answer 1

我的当前项目遇到了同样的问题。以下是我找到一个好的解决方案的方法。我确信我的一些代码可以更好地重构......但它应该有助于给你一个想法。基本上，我使用基于令牌的身份验证，我检查应用程序何时呈现本地存储中是否存在令牌，如果是，则用户进行身份验证＆＃34;。此用户对服务器发出的任何请求都将附加此令牌，后端可以验证令牌是否有效，如果不是，则我可以返回删除令牌的操作，然后将其注销。

我有一个像这样的索引页面：

import React, { Component } from 'react';
import { Provider } from 'react-redux';
import { createStore, applyMiddleware } from 'redux';
import reducers from './reducers';
import ReduxThunk from 'redux-thunk';
import Content from './app';

class App extends Component {
  render() {
    const store = createStore(reducers, {}, applyMiddleware(ReduxThunk));

    return(
      <Provider store={store}>
        <Content />
      </Provider>
    );
  }
}

export default App;

这允许我在我的商店中使用redux ...然后我从我的app.js文件中获取我的实际App内容，如下所示：

import React, { Component } from 'react';
import { View, StatusBar, Platform, AsyncStorage, ActivityIndicator } from 'react-native';
import { Tabs, Drawer, LoginStack } from './config/router';
import { connect } from 'react-redux';
import { checkLogin } from './actions';

class Content extends Component {
  componentWillMount() {
    this.props.checkLogin();
  }

  render() {
    if (this.props.checkingUser) {
      return (
        <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
          <ActivityIndicator size="large" />
        </View>
      );
    }
    if (this.props.token) {
      if (Platform.OS === 'ios') {
        return <View><StatusBar barStyle="light-content" /><Tabs /></View>;
      }

      return <Drawer />;
    }

    return <View><StatusBar barStyle="light-content" /><LoginStack /></View>;
  }
}

const mapStateToProps = ({ auth }) => {
  const { token, checkingUser } = auth;

  return { token, checkingUser };
}

export default connect(mapStateToProps, { checkLogin })(Content);

然后我的checkLogin操作如下所示：

export const checkLogin = () => {
  return (dispatch) => {
    doCheck(dispatch);
  }
}

const doCheck = async dispatch => {
  let token = await AsyncStorage.getItem('token');

  if (token) {
    dispatch({ type: LOGGED_IN, payload: token });
  } else {
    dispatch({ type: LOGGED_OUT });
  }
}

Answer 2

在您的登录名中进行此操作，它将把您重定向到首页

componentWillReceiveProps(nextProps) {
  if(nextProps.checkingUser) {
    this.props.navigation.navigate('Home');
  }
}

使用react-navigation和redux登录后重定向用户

2 个答案: