如何在用户退出应用后让用户保持登录状态?
问题描述:
我想知道如何让用户保持登录状态,即使退出应用程序后本机反应,我正在使用restAPI使用户登录到我的应用程序,它工作正常,但我的问题是当用户退出应用程序用户再次显示在家中,但我希望应用程序显示欢迎屏幕,而不是用户已登录我的应用程序。如何在用户退出应用后让用户保持登录状态?
import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
Text,
View,
Image,
TextInput,
Form,
TouchableHighlight,
ScrollView,
Dimensions,
} from 'react-native';
// import hr from 'react-native-hr';
import Icon from 'react-native-vector-icons/FontAwesome';
import Hr from '../modules/hr.dist';
// import AndroidBackButton from 'react-native-android-back-button';
export default class Login extends Component {
constructor(props) {
super(props)
this.state = {
username: '',
password: '',
}
}
_userLogin() {
var pass = this.state.password;
var user = this.state.username;
if (pass && user) {
fetch("http://www.amkwebsolutions.com/trades/rest_login/", {
method: "POST",
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json'
},
body: JSON.stringify({
'username': user,
'password': pass
})
}).then((response) => response.json())
.then((responseData) => {
if (responseData.status==1) {
this.props.navigator.replace({id: 'welcome', userData: {userId: responseData.user_id, userName: responseData.display_name, userAvatar: responseData.user_avtar} })
} else {
alert("Incorrect Username or Password")
}
}).done();
}
}
render() {
return (
<View style={{flex: 1}}>
<View style={styles.header_main} >
<TouchableHighlight onPress={() => this.props.navigator.push({id: 'home'})}><Icon name="arrow-left" size={20} color="black" /></TouchableHighlight>
<Image source={{uri: 'http://res.cloudinary.com/vowelweb/image/upload/v1498114115/Logo_mqzlgt.png'}} style={styles.header_logo}/>
<Icon name="list-ul" size={20} color="black" />
</View>
<View style={styles.body_main}>
<Text style={styles.body_main_heading} >LOGIN</Text>
<View style={styles.body_main_view_image}>
<Image source={require("../images/Login.png")} style={styles.body_main_image}/>
</View>
<View style={styles.body_main_form}>
<TextInput
underlineColorAndroid='transparent'
placeholder="Username"
returnKeyLabel = {"next"}
onChangeText={(text) => this.setState({username:text})}
placeholderTextColor = "white"
style={{height: 50, borderRadius: 45, marginLeft: 20, marginRight: 20, marginTop: 0, backgroundColor: '#a6a6a8', fontFamily: 'Montserrat-SemiBold', color: 'white', fontSize: 18, paddingLeft: 65,}}
/>
<TextInput
underlineColorAndroid='transparent'
secureTextEntry = {true}
placeholder="Password"
placeholderTextColor = "white"
returnKeyLabel = {"go"}
onChangeText={(password) => this.setState({password:password})}
style={{height: 50, borderRadius: 45, marginLeft: 20, marginRight: 20, marginTop: 20, backgroundColor: '#a6a6a8', fontFamily: 'Montserrat-SemiBold', color: 'white', fontSize: 18, paddingLeft: 65,}}
/>
</View>
</View>
<View style={{flex: 1, backgroundColor: '#efeff2',}}>
<TouchableHighlight style={styles.button} onPress={() => this._userLogin()} underlayColor='#99d9f4'>
<Text style={styles.buttonText}>Sign in</Text>
</TouchableHighlight>
</View>
<View style={{flex: 0.6, backgroundColor: '#efeff2', flexDirection: 'row', paddingTop: 5, paddingLeft:20, paddingRight: 18,}}>
<TouchableHighlight onPress={() => this.props.navigator.push({id: 'register'})}><Text style={{fontFamily: 'Montserrat-SemiBold', color: 'black', fontSize: 16, paddingRight: 100,}}>Create Account</Text></TouchableHighlight>
<TouchableHighlight onPress={() => this.props.navigator.push({id: 'forgetpassword'})}><Text style={{fontFamily: 'Montserrat-SemiBold', color: 'black', fontSize: 16,}}>Forgot Password ?</Text></TouchableHighlight>
</View>
<View style={{flex: 0.4, paddingLeft: 10, paddingRight:10, backgroundColor: '#efeff2', alignItems: 'center', flexDirection: 'row',}}>
<Hr lineStyle={{backgroundColor: "#a6a6a8"}} text='or' textStyle={{color: 'black', fontFamily: 'Montserrat-SemiBold', fontSize: 16,}}/>
</View>
<View style={{flex: 1, flexDirection: 'row', paddingLeft: 20, alignItems: 'center', backgroundColor: '#efeff2',}}>
<Text style={{color: 'black', fontFamily: 'Montserrat-SemiBold', fontSize: 16, paddingRight: 35,}}>Connect with us</Text>
<Image source={require("../images/Facebook.png")} style={{width: 50, height: 50, marginRight: 20,}} />
<Image source={require("../images/Tumblr.png")} style={{width: 50, height: 50, marginRight: 20,}} />
<Image source={require("../images/Google.png")} style={{width: 50, height: 50,}} />
</View>
</View>
);
}
}
var styles = StyleSheet.create({
container: {
flex: 1,
},
header_main: {
flex: 1.3,
paddingLeft: 20,
paddingRight:20,
backgroundColor: 'white',
justifyContent: 'center',
flexDirection: 'row',
borderBottomWidth:1,
alignItems: 'center',
},
header_logo: {
flex:1,
width:350,
height:100,
resizeMode:'contain',
marginRight: 12,
marginLeft: 12,
},
body_main: {
flex: 4,
backgroundColor: '#efeff2',
justifyContent: 'center'
},
body_main_heading: {
textAlign:'center',
fontSize:24,
paddingTop:10,
fontFamily: 'Montserrat-SemiBold',
color: 'black',
},
body_main_view_image: {
flex: 1,
backgroundColor: '#efeff2',
flexDirection: 'row',
justifyContent: 'center',
paddingTop: 0,
},
body_main_image: {
width:null,
height:null,
resizeMode:'contain',
paddingLeft: 50,
paddingRight:50
},
body_main_input: {
},
buttonText: {
fontSize: 18,
color: 'white',
alignSelf: 'center',
fontFamily: 'Montserrat-SemiBold',
},
button: {
height: 50,
backgroundColor: '#217821',
borderColor: '#217821',
borderWidth: 1,
borderRadius: 45,
marginTop: 20,
alignSelf: 'stretch',
justifyContent: 'center',
marginLeft: 20,
marginRight: 20,
},
});
https://developer.android.com/training/basics/data-storage/shared-preferences.html# ReadSharedPreference –
将一些值存储在Android和UserDefaults for iOS的共享首选项中。这些值甚至在应用程序被杀后仍然存在。每当应用程序启动时检查,如果特定值存在,那么用户必须登录,否则表现为没有用户登录。 –