Question

我对此非常陌生，想知道如何正确地做到这一点。我的后端是一个django休息框架，我的前面是反应本机。我的后端有用户，我的应用程序需要令牌身份验证来识别用户。在探索了本机后，我知道我将需要使用fetch和post方法来访问api。

成功的身份验证应该让用户导航到主页

这是我到目前为止所做的：

import React, { Component } from 'react';
import {
    StyleSheet,
    Text,
    View,
    TextInput,
    KeyboardAvoidingView,
    TouchableOpacity,
    AsyncStorage,
} from 'react-native';

export default class Form extends Component<{}> {

constructor(props){
    super(props);
    this.state = {
        username: "",
        password: "",

    }
}

componentDidMount(){
    this._loadInitialState().done();

}
_loadInitialState= async() => {
    var value = await AsyncStorage.getItem('user');
    if (value !== null){
        this.props.navigation.navigate('Main')
    }
}


render(){
    return(
        //<KeyboardAvoidingView style={styles.wrapper}>
        <View style={styles.container}>
            <TextInput style={styles.boxInput} underlineColorAndroid='rgba(0,0,0,0)' placeholder="Username"
                       onChangeText={ (username) => this.setState({username}) }
                       underlineColorAndroid='transparent' onSubmitEditing={()=> this.password.focus()}/>

            <TextInput style={styles.boxInput} underlineColorAndroid='rgba(0,0,0,0)' placeholder="Password"
                       onChangeText={ (password) => this.setState({password}) }
                       underlineColorAndroid='transparent' secureTextEntry={true} ref={(input) => this.password = input}/>
            <TouchableOpacity style={styles.button} onPress={this.login}>
                <Text style={styles.textButton}>{this.props.type}</Text>
            </TouchableOpacity>
        </View>
        //</KeyboardAvoidingView>
    );
}
login = () => {

    //alert(this.state.username);
    fetch('http://.../token-auth/', {
        method: 'POST',
        headers : {
            'Authorization': 'Token' + '4bd97c6a3da72d83cee684617f43718811db4d88', #random token
            'Accept': 'application/json',
            'Content-Type': 'application/json',
        },
        body: JSON.stringify({
            username: this.state.username,
            password: this.state.password,
        })
    })
        .then((response) => response.json())
        .then((res) => {
            //alert(res.message);
            if (res.success === true){
                AsyncStorage.setItem('user', res.user);
                this.props.navigation.navigate('Main');
            }
            else{
                alert(res.message);

            }
        })
        .done();

我得到了未定义的回复。 token-auth是我的api响应，它返回令牌。我知道axios是另一种执行此操作的方法，但我真的必须使用axios吗？

这是控制台的输出：

03-10 14:44:59.491  9464  9561 I ReactNativeJS:   statusText: undefined,
03-10 14:44:59.491  9464  9561 I ReactNativeJS:   headers:
03-10 14:44:59.491  9464  9561 I ReactNativeJS:    { map:
03-10 14:44:59.491  9464  9561 I ReactNativeJS:       { allow: [ 'POST, OPTIONS' ],
03-10 14:44:59.491  9464  9561 I ReactNativeJS:         'content-type': [ 'application/json' ],
03-10 14:44:59.491  9464  9561 I ReactNativeJS:         'x-frame-options': [ 'SAMEORIGIN' ],
03-10 14:44:59.491  9464  9561 I ReactNativeJS:         server: [ 'WSGIServer/0.1 Python/2.7.14' ],
03-10 14:44:59.491  9464  9561 I ReactNativeJS:         date: [ 'Sat, 10 Mar 2018 14:44:53 GMT' ] } },
03-10 14:44:59.491  9464  9561 I ReactNativeJS:   url: 'http://:8080/token-auth/',
03-10 14:44:59.491  9464  9561 I ReactNativeJS:   _bodyInit: '{"token":"4bd97c6a3da72d83cee684617f43718811db4d88"}',
03-10 14:44:59.491  9464  9561 I ReactNativeJS:   _bodyText: '{"token":"4bd97c6a3da72d83cee684617f43718811db4d88"}' }
03-10 14:44:59.500  9464  9561 E ReactNativeJS: undefined is not an object (evaluating 'res.success')

我错过了一些至关重要的事情吗？一些指针将非常感激。感谢

Answer 1

代码中的一个小但却至关重要的错误是

中缺少的空格

'Authorization': 'Token' + '4bd97c6a3da72d83cee684617f43718811db4d88'

将其更改为

'Authorization': 'Token ' + '4bd97c6a3da72d83cee684617f43718811db4d88'

你可能会更进一步。我将你的fetch脚本与我的相比较，它非常相似。在开发过程中，更改

可能会有所帮助

.then((response) => response.json())

到

.then((response) => console.log(response))

确定问题到底是什么。

响应未包含任何成功密钥。而不是

if (resjson.success===true ){

应该有

if (resjson.token ){

django rest框架并使用未定义的响应来响应本机用户身份验证

1 个答案: