Question

我正在创建一个应用程序，其中导航组件保存在索引中。启动时，您将自动进入登录页面。在此登录页面中，将为用户提供身份验证令牌。如何将此令牌返回到索引，以便可以在整个应用程序的其余部分使用它？谢谢！

index.android.js

//lots of imports
export default class CBURecCenterApp extends Component {

constructor(){
    super()
    this.renderScene = this.renderScene.bind(this)
}

renderScene(route, navigator){
    switch(route.name){
        case 'Home':
            return <HomePage navigator={navigator} />
            break;
        case 'Calendar':
            return <CalendarPage navigator={navigator} />
            break;
        case 'Events':
            return <EventsPage navigator={navigator} />
            break;
        case 'Discover':
            return <DiscoverPage navigator={navigator} />
            break;
        case 'Profile':
            return <ProfilePage navigator={navigator} />
            break;
        case 'Settings':
            return <SettingsPage navigator={navigator} />
            break;
        case 'Info':
            return <InfoPage navigator={navigator} />
            break;
        case 'Login':
            return <LoginPage navigator={navigator} />
            break;
        case 'Register':
            return <RegisterPage navigator={navigator} />
            break;
        default:
            return <ErrorPage navigator={navigator} />
    }
}
render() {
    return (
      <Navigator
        initialRoute={{name: 'Login'}}
        renderScene={this.renderScene}
      />
    );
  }
}

 AppRegistry.registerComponent('CBURecCenterApp', () => CBURecCenterApp);

LoginPage.js

import React, { Component, PropTypes } from 'react';
import { View, Text, TextInput, StyleSheet, TouchableHighlight} from 'react-    native';
import Api from '../Utility/Api';


export default class LoginPage extends Component {

constructor(props) {
    super(props);
    this.state = {
        userName: null,
        password: null
      };
  }

  navigate(name){
      this.props.navigator.push({
          name
      })
  }

  submitLogin(){
    response: Api.login(
        this.state.userName,
        this.state.password
    );
    if(response.status === 200){
        //pass authentication token to index.android.js
        //navigate to home page
    }
    else{
        //invalid username/password handling code
    }
  }

render(){
    return (
        <View>
            <TextInput
                style={styles.textField}
                onChangeText={(userName) => this.setState({userName})}
                value={this.state.userName}
                keyboardType = {'email-address'}
                autoCorrect = {false}
                placeholder = {'CBU Email'}
            />
            <TextInput
                style={styles.textField}
                onChangeText={(password) => this.setState({password})}
                value={this.state.password}
                keyboardType = {'email-address'}
                autoCorrect = {false}
                placeholder = {'password'}
                secureTextEntry={ true }
            />
        </View>
    )
  }
}

const styles = StyleSheet.create({
textField: {
    height: 40,
    borderColor: 'gray',
    borderWidth: 1
}
})

Answer 1

使用本地存储检查身份验证

this.props.login({
    email: this.state.email,
    password: this.state.password
}, function(err, token) {
    if (err) console.log(err);
    if(token) {
        AsyncStorage.setItem("jwt", token, this._navToOffers);

    }
})

Answer 2

我希望简单地将一个道具传递给导航器，我了解到这可以通过在推到导航堆栈时简单地传递道具来实现。

      navigate(name){
      this.props.navigator.push({
          name: name,
          token: this.state.response
      })
  }

Answer 3

如果我很了解，您需要通过应用程序中的多个组件传递令牌访问权限，显然是要从多个位置访问服务器。这里要做的并且大多数用户使用的典型解决方案是实现Redux，这是JavaScript的另一种形式，就像React Native一样，它允许您通过组件的支持传递数据和应用程序的全局状态。

这样，您的令牌将被存储到Redux的“存储”中，并且您的组件可以访问它。

乍一看，Redux似乎很难使用，但是一旦您了解了基础知识和复杂的术语，就可以了。

以下是Redux的文档：https://es.redux.js.org/

还有一个Udemy课程，我认为它可以帮助您：https://www.udemy.com/the-complete-react-native-and-redux-course/

React Native，将身份验证令牌传递给索引

3 个答案: