仅当用户未登录时才显示登录屏幕

Question

我正在尝试制作一个本机应用程序。 我已经制作了登录页面，但我无法解决这个问题，我该如何制作一个标志来告诉我是否有用户登录。 如果用户已登录，请转到仪表板。 否则登录屏幕。

这是我的 App.js。

import React, { useState } from 'react';
import { StyleSheet, Text, View, Button, AsyncStorage } from 'react-native';

import Login from './components/Login';
import Dashboard from './components/Dashboard';

export default function App() {
  var [ token, setToken ] = useState('');

  function loginHandler(recievedToken) {
    setToken(recievedToken);
  }
  async function _readData() {
    try {
      const value = await AsyncStorage.getItem('Token');
      console.log(value);
      if (value !== null) {
        // We have data!!
        loginHandler(value)
      } else {
        loginHandler(null);
      }
    } catch (error) {
      // Error retrieving data
    }
  };
  return (
    <View>
      <Login />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

Answer 1

理想情况下，如果您正在开发一个完整的应用程序，您应该有一个身份验证方法和一个服务器，用于验证登录和会话。 大多数方法使用具有到期日期并且不时更新的会话令牌。 这个令牌和这些方法都存储在浏览器端本地。 一个例子应该是 OAuth 算法。

在此线程上，有些人讨论了存储令牌的方法：

如何在本机反应中存储令牌？

编辑：我写的这部分是关于 React 的，而不是 React Native，所以我把它留在下面：

您可以使用会话存储来存储该令牌或仅存储简化标志，如您所问。

我没有资格谈论为什么Session Storage vs Local Storage vs Cookies以及最佳实践是什么，但这里有一些链接：

https://www.robinwieruch.de/local-storage-react

https://scotch.io/@PratyushB/local-storage-vs-session-storage-vs-cookie

https://oauth.net/2/

希望这足以让你开始！