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算法。

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

How to store tokens in react native?

编辑：我已经写了关于React的这一部分，而不是React Native，所以我将其保留在下面：

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

我没有资格谈论为什么 Session Storage 与 Local Storage vs ，以及最佳做法是什么，但这是一些链接：

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

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

https://oauth.net/2/

希望这足以让您入门！

仅在用户未登录时显示登录屏幕

1 个答案: