AsyncStorage 在本机反应中隐藏登录屏幕

Posted 2023-03-08

【中文标题】AsyncStorage 在本机反应中隐藏登录屏幕

【英文标题】：AsyncStorage to hide login screen in react native

【发布时间】：2020-02-21 11:32:03

【问题描述】：

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

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>
    );
  

【参考方案1】：

这是我如何为我的应用程序做同样的事情，

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

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

在 app.js 或调用的第一个组件中，我检查令牌是否存在，如果存在，则重定向到主屏幕或入职屏幕。

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

我的签名函数如下：

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));
  );
;

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

【参考方案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) => 
 

【讨论】：

它有效，但我收到了一个 firebase 致命错误。 if (!firebase.apps.length) firebase.initializeapp (config);虽然我用。

至于firebase致命错误，可以看这个问题(***.com/questions/37652328/…)

【参考方案3】：

创建一个不同的类来管理令牌并检查用户登录。

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>