javascript - Ionic-React 访问移动设备的本地存储

问题描述

我正在尝试使用离子和数据库创建一个简单的登录系统。我正在使用一个简单的 SQL 查询来确保登录凭据有效，然后将用户转到主仪表板页面。我正在尝试显示带有标题“欢迎”的用户名。

我将 Ionic 与 react.js 一起使用。我也在使用电容器。每当我将笔记本电脑上的应用程序作为 Web 应用程序进行测试时，它都会按预期工作并显示用户名。一旦我通过我的 android 设备进行测试，它就会正确登录，但不显示用户名。我会错过什么？

出于调试目的，我将其从名称更改为用户的 id 号...仍然无法正确显示数字...

Web 应用程序 - 这是移动设备应该看起来的样子，但实际上并非如此

登录代码

import React, { useState, useEffect } from 'react';
import { Plugins } from '@capacitor/core';
import './Login.css';
import { Link, Redirect } from 'react-router-dom';
import axios from 'axios';

const { Storage } = Plugins;

const Login: React.FC = () => {
    const [username, setUsername] = useState<string>('');
    const [password, setPassword] = useState<string>('');
    const [isError, setIsError] = useState<boolean>(false);

    function handleLogin() {
        // // const baseURL = process.env.NODE_ENV !== "production" ? "http://localhost:3000" : "https://freightsnap-proto.herokuapp.com"   
        const baseURL = "https://freightsnap-proto.herokuapp.com";

        console.log("user: " + username);
        console.log("pass: " + password);

        let userInfo = {
            username: username,
            password: password
        }

        axios.post(baseURL + "/login", userInfo) .then(function(response) {
            if(response.data.length != 0) {
                setIsError(false);
                let userInfo = response.data[0];
                let data = JSON.stringify(userInfo);

                setUserData(data, userInfo.id);
            }
            else {
                console.log("err");
                setIsError(true);
            }
        });
    }

    async function setUserData(data: any, id: any){
        await Storage.set({
            key: 'user',
            value: data,
          });

          await Storage.set({
            key: '_id',
            value: id,
          });

          window.location.href = "/home"

        // getUserData();
    }

    async function getUserData() {
        // const { value } = await Storage.get({ key: 'user' });
        // console.log("getting...");
        // const user = console.log(value);

        // const ret = await Storage.get({ key: '_id' });
        // const user = JSON.parse(ret.value || '{}');

        // console.log(user);
      }

    return (
        <IonPage>
            <IonContent>
                <div className="bg-light">
                    <h1 className="header">[LOGO]</h1>
                    <div className="container">
                        <IonInput style={{ paddingTop: "30px" }} placeholder="Username" className="dark-txtbox" value={username} onIonChange={(e: any) => setUsername(e.target.value)} ></IonInput>
                        <IonInput placeholder="Password" type="password" className="dark-txtbox" value={password} onIonChange={(e: any) => setPassword(e.target.value)} ></IonInput>
                        <IonButton onClick={handleLogin} className="btn-mainBlue" shape="round" expand="full">Login</IonButton>
                        {
                            isError ? (
                                <p style={{color: "red"}}>Invalid Login!</p>
                            ) : (
                                <p></p>
                            )
                        }
                    </div>
                </div>
            </IonContent>
        </IonPage>
    );
};

export default Login;

仪表板代码

import React, { useState, useEffect } from 'react';
import ExploreContainer from '../components/ExploreContainer';
import { Plugins } from '@capacitor/core';
import './Home.css';
import axios from 'axios';

const { Storage } = Plugins;

const Home: React.FC = () => {
  const [userFullName, setUserFullName] = useState<string>('');

  useEffect(() => {
    getUserData();
    // const baseURL = process.env.NODE_ENV !== "production" ? "http://localhost:3000" : "https://freightsnap-proto.herokuapp.com"   

    // var url = window.location.href;
    // var splitUrl = url.split("/");
    // var userId = splitUrl[4]

    // console.log(userId);

    // axios.get(baseURL + `/findUser/${userId}`).then(response => {
    //   setUserFullName(response.data[0].user_name);

    //   console.log(userFullName);
    // })
  })

  async function getUserData() {
    const { value } = await Storage.get({ key: '_id' });

    // const baseURL = process.env.NODE_ENV !== "production" ? "http://localhost:3000" : "https://freightsnap-proto.herokuapp.com"   
    const baseURL = "https://freightsnap-proto.herokuapp.com";
    console.log(value);

    setUserFullName(value || "");

    // axios.get(baseURL + `/findUser/${value}`).then(response => {
    //   setUserFullName(response.data[0].user_name);

    //   console.log(userFullName);
    // })
  }

  return (
    <IonPage>
      <IonHeader>
        <IonToolbar>
          <IonTitle>Dashboard - Welcome {userFullName}</IonTitle>
        </IonToolbar>
      </IonHeader>
      <IonContent>
        <IonHeader collapse="condense">
          <IonToolbar>
            <IonTitle size="large">Blank</IonTitle>
          </IonToolbar>
        </IonHeader>
        <ExploreContainer />
      </IonContent>
    </IonPage>
  );
};

export default Home;

标签： javascriptreactjsionic-frameworkcapacitor

javascript - Ionic-React 访问移动设备的本地存储

问题描述

解决方案

推荐阅读