Question

登录后打开和关闭应用程序时，我希望再次打开同一页面，因此用户不会再次登录。除非用户注销，否则在打开应用程序时不要打开登录页面。我要他注销时打开登录页面。当我不退房/回家时，我想打开。

index.js

import {AppRegistry} from 'react-native';
import App from './App';
import {name as appName} from './app.json';

AppRegistry.registerComponent('ReactNativeAuth', () => App);

AppRegistry.registerComponent(appName, () => App);

App.js

import React from "react";
import { StyleSheet, Text, View } from "react-native";
import { NativeRouter, Switch, Route } from "react-router-native";

import Login from "./src/Login";
import Home from "./src/components/usrFirst";

export default class App extends React.Component {
  render() {
    return (
      <NativeRouter>

            <Route exact path="/" component={Login} />
            <Route exact path="/Home" component={Home} />

      </NativeRouter>
    );
  }
}

Answer 1

这是我为我的应用执行相同操作的方式，

这是登录成功后通过异步存储将令牌存储在我的应用中的方式。 export const setData = (key, value) => AsyncStorage.setItem(key, value);

成功登录后将调用此方法，这将在异步存储中设置令牌。 await setData('token', result.payload.token);

然后在app.js或第一个称为whihc的组件中，我检查令牌是否确实存在，如果令牌存在，那么我将重定向到主屏幕或入职屏幕。

const token = await isSignedIn();
      this.props.navigation.navigate(token ? 'HomeScreen' : 'LoginScreen');

我的signIn功能如下：

export const isSignedIn = () => {
  return new Promise((resolve, reject) => {
    AsyncStorage.getItem(JWT_KEY)
      .then(res => {
        if (res !== null) {
          resolve(true);
        } else {
          resolve(false);
        }
      })
      .catch(err => reject(err));
  });
};

这就是我如何实现的，请随时提出任何疑问。

Answer 2

在打开应用程序时通常首先打开的组件中，执行以下代码

 componentDidMount(){
 AsyncStorage.getItem("UserInfo",error,result){
 if(error){ //do something}
 if(result){
 Object.assign("you object save the user info in memory",JSON.parse(result))
 }     
 }

}

同时，您应该在登录时保存信息，

logSuccess(response){
 //firstly, save the data into a memory object
 Session.user = JSON.parse(response)
 // then save it into AsyncStorage
  AsyncStorage.setItem('UserInfo', JSON.stringify(Session), (error) => {
 }

}

Answer 3

创建另一个类来管理令牌并检查用户LoggedIn。

export AUTH_TOKEN = "authToken";

export class AuthService {

    static async saveToken(token) {
      await AsyncStorage.setItem(AUTH_TOKEN, token);
    }

    static async isLoggedIn() {
      const token = await AsyncStorage.getItem(AUTH_TOKEN);
      return token !== null;
    }

}

创建AuthLoadingScreen类，并将其设置为导航器。

class AuthLoadingScreen {

  componentDidMount() {

    const isLoggedIn = await AuthService.isLoggedIn();

    const {navigate} = this.props.navigation;

    navigate(isLoggedIn ? 'HomeScreen' : 'LoginScreen');
  }

  render() {
    <View>
    </View>
  }

}

AsyncStorage在React Native中隐藏登录屏幕

3 个答案: