Aktuellen Parse-Benutzer in React abrufen

aktuellen benutzer für react abrufen einführung nachdem sie die benutzerregistrierung und den login in ihre anwendung implementiert haben, müssen sie die daten des aktuell angemeldeten benutzers abrufen, um verschiedene aktionen und anfragen durchzuführen diese daten können schnell abgerufen werden, indem sie parse user current parse user current in ihren app komponenten verwenden voraussetzungen um dieses tutorial abzuschließen, benötigen sie eine react app, die erstellt und mit back4app verbunden ist vervollständigen sie den vorherigen leitfaden, damit sie ein besseres verständnis von der parse user klasse und der parse user login methode https //www back4app com/docs/react/working with users/react user login wenn sie das bildschirmlayout, das in diesem leitfaden bereitgestellt wird, testen/verwenden möchten, sollten sie die ant design ant design bibliothek einrichten ziel holen sie sich die aktuellen benutzerdaten, indem sie parse für eine react app verwenden 1 aktuellen benutzer abrufen die methode parse user current parse user current kann überall in ihrem code verwendet werden, nachdem sie ihre app ordnungsgemäß konfiguriert haben, um parse zu verwenden die antwort wird das objekt ihres aktuellen benutzers sein ( parse user parse user ) oder null, wenn derzeit kein benutzer angemeldet ist javascript 1 const getcurrentuser = async function () { 2 const currentuser = await parse user current(); 3 if (currentuser !== null) { 4 alert alert( 5 'success!', 6 `${currentuser get('username')} is the current user!`, 7 ); 8 } 9 return currentuser; 10 };1 const getcurrentuser = async function () promise\<parse user | null> { 2 const currentuser parse user = await parse user current(); 3 if (currentuser !== null) { 4 alert alert( 5 'success!', 6 `${currentuser get('username')} is the current user!`, 7 ); 8 } 9 return currentuser; 10 }; diese methode ist entscheidend in situationen, in denen sie keinen zugriff auf den zustand ihrer anwendung oder ihre benutzerdaten haben, was es ermöglicht, relevante parse anfragen in jeder komponente ihrer app durchzuführen 2 verwendung des aktuellen benutzers in einer react komponente in unseren vorherigen anleitungen wurde die parse user current parse user current methode bereits verwendet, um den aktuellen benutzernamen im benutzeranmeldehandbuch anzuzeigen hier ist der userlogin userlogin komponenten code, werfen sie einen genaueren blick auf die getcurrentuser getcurrentuser funktion userlogin js 1 import react, { usestate } from 'react'; 2 import parse from 'parse/dist/parse min js'; 3 import ' /app css'; 4 import { button, divider, input } from 'antd'; 5&#x9; 6 export const userlogin = () => { 7 // state variables 8 const \[username, setusername] = usestate(''); 9 const \[password, setpassword] = usestate(''); 10 const \[currentuser, setcurrentuser] = usestate(null); 11&#x9; 12 const douserlogin = async function () { 13 // note that these values come from state variables that we've declared before 14 const usernamevalue = username; 15 const passwordvalue = password; 16 try { 17 const loggedinuser = await parse user login(usernamevalue, passwordvalue); 18 // login returns the corresponding parseuser object 19 alert( 20 `success! user ${loggedinuser get( 21 'username' 22 )} has successfully signed in!` 23 ); 24 // to verify that this is in fact the current user, `current` can be used 25 const currentuser = await parse user current(); 26 console log(loggedinuser === currentuser); 27 // clear input fields 28 setusername(''); 29 setpassword(''); 30 // update state variable holding current user 31 getcurrentuser(); 32 return true; 33 } catch (error) { 34 // error can be caused by wrong parameters or lack of internet connection 35 alert(`error! ${error message}`); 36 return false; 37 } 38 }; 39&#x9; 40 const douserlogout = async function () { 41 try { 42 await parse user logout(); 43 // to verify that current user is now empty, currentasync can be used 44 const currentuser = await parse user current(); 45 if (currentuser === null) { 46 alert('success! no user is logged in anymore!'); 47 } 48 // update state variable holding current user 49 getcurrentuser(); 50 return true; 51 } catch (error) { 52 alert(`error! ${error message}`); 53 return false; 54 } 55 }; 56&#x9; 57 // function that will return current user and also update current username 58 const getcurrentuser = async function () { 59 const currentuser = await parse user current(); 60 // update state variable holding current user 61 setcurrentuser(currentuser); 62 return currentuser; 63 }; 64&#x9; 65 return ( 66 \<div> 67 \<div classname="header"> 68 \<img 69 classname="header logo" 70 alt="back4app logo" 71 src={ 72 'https //blog back4app com/wp content/uploads/2019/05/back4app white logo 500px png' 73 } 74 /> 75 \<p classname="header text bold">{'react on back4app'}\</p> 76 \<p classname="header text">{'user login'}\</p> 77 \</div> 78 {currentuser === null && ( 79 \<div classname="container"> 80 \<h2 classname="heading">{'user login'}\</h2> 81 \<divider /> 82 \<div classname="form wrapper"> 83 \<input 84 value={username} 85 onchange={(event) => setusername(event target value)} 86 placeholder="username" 87 size="large" 88 classname="form input" 89 /> 90 \<input 91 value={password} 92 onchange={(event) => setpassword(event target value)} 93 placeholder="password" 94 size="large" 95 type="password" 96 classname="form input" 97 /> 98 \</div> 99 \<div classname="form buttons"> 100 \<button 101 onclick={() => douserlogin()} 102 type="primary" 103 classname="form button" 104 color={'#208aec'} 105 size="large" 106 > 107 log in 108 \</button> 109 \</div> 110 \</div> 111 )} 112 {currentuser !== null && ( 113 \<div classname="container"> 114 \<h2 classname="heading">{'user screen'}\</h2> 115 \<divider /> 116 \<h2 classname="heading">{`hello ${currentuser get('username')}!`}\</h2> 117 \<div classname="form buttons"> 118 \<button 119 onclick={() => douserlogout()} 120 type="primary" 121 classname="form button" 122 color={'#208aec'} 123 size="large" 124 > 125 log out 126 \</button> 127 \</div> 128 \</div> 129 )} 130 \</div> 131 ); 132 }; hellouser tsx 1 import react, { usestate, fc, reactelement } from 'react'; 2 import ' /app css'; 3 import { button, divider, input } from 'antd'; 4 const parse = require('parse/dist/parse min js'); 5&#x9; 6 export const userlogin fc<{}> = () reactelement => { 7 // state variables 8 const \[username, setusername] = usestate(''); 9 const \[password, setpassword] = usestate(''); 10 const \[currentuser, setcurrentuser] = usestate\<parse object | null>(null); 11&#x9; 12 const douserlogin = async function () promise\<boolean> { 13 // note that these values come from state variables that we've declared before 14 const usernamevalue string = username; 15 const passwordvalue string = password; 16 try { 17 const loggedinuser parse user = await parse user login(usernamevalue, passwordvalue); 18 // login returns the corresponding parseuser object 19 alert( 20 `success! user ${loggedinuser get('username')} has successfully signed in!`, 21 ); 22 // to verify that this is in fact the current user, `current` can be used 23 const currentuser parse user = await parse user current(); 24 console log(loggedinuser === currentuser); 25 // clear input fields 26 setusername(''); 27 setpassword(''); 28 // update state variable holding current user 29 getcurrentuser(); 30 return true; 31 } catch (error any) { 32 // error can be caused by wrong parameters or lack of internet connection 33 alert(`error! ${error message}`); 34 return false; 35 } 36 }; 37&#x9; 38 const douserlogout = async function () promise\<boolean> { 39 try { 40 await parse user logout(); 41 // to verify that current user is now empty, currentasync can be used 42 const currentuser parse user = await parse user current(); 43 if (currentuser === null) { 44 alert('success! no user is logged in anymore!'); 45 } 46 // update state variable holding current user 47 getcurrentuser(); 48 return true; 49 } catch (error any) { 50 alert(`error! ${error message}`); 51 return false; 52 } 53 }; 54&#x9; 55 // function that will return current user and also update current username 56 const getcurrentuser = async function () promise\<parse user | null> { 57 const currentuser (parse user | null) = await parse user current(); 58 // update state variable holding current user 59 setcurrentuser(currentuser); 60 return currentuser; 61 } 62&#x9; 63 return ( 64 \<div> 65 \<div classname="header"> 66 \<img 67 classname="header logo" 68 alt="back4app logo" 69 src={ 70 'https //blog back4app com/wp content/uploads/2019/05/back4app white logo 500px png' 71 } 72 /> 73 \<p classname="header text bold">{'react on back4app'}\</p> 74 \<p classname="header text">{'user login'}\</p> 75 \</div> 76 {currentuser === null && 77 (\<div classname="container"> 78 \<h2 classname="heading">{'user login'}\</h2> 79 \<divider /> 80 \<div classname="form wrapper"> 81 \<input 82 value={username} 83 onchange={(event) => setusername(event target value)} 84 placeholder="username" 85 size="large" 86 classname="form input" 87 /> 88 \<input 89 value={password} 90 onchange={(event) => setpassword(event target value)} 91 placeholder="password" 92 size="large" 93 type="password" 94 classname="form input" 95 /> 96 \</div> 97 \<div classname="form buttons"> 98 \<button 99 onclick={() => douserlogin()} 100 type="primary" 101 classname="form button" 102 color={'#208aec'} 103 size="large" 104 > 105 log in 106 \</button> 107 \</div> 108 \</div>) 109 } 110 {currentuser !== null && 111 (\<div classname="container"> 112 \<h2 classname="heading">{'user screen'}\</h2> 113 \<divider /> 114 \<h2 classname="heading">{`hello ${currentuser get('username')}!`}\</h2> 115 \<div classname="form buttons"> 116 \<button 117 onclick={() => douserlogout()} 118 type="primary" 119 classname="form button" 120 color={'#208aec'} 121 size="large" 122 > 123 log out 124 \</button> 125 \</div> 126 \</div>) 127 } 128 \</div> 129 ); 130 }; in dieser komponente ruft die parse user current parse user current methode den benutzernamen ab und aktualisiert die statusvariable, die innerhalb des komponenten jsx gerendert wird fügen sie diese klassen zu ihrer app css app css datei hinzu, um die layout stile vollständig zu rendern app css 1 @import ' antd/dist/antd css'; 2&#x9; 3 app { 4 text align center; 5 } 6&#x9; 7 html { 8 box sizing border box; 9 outline none; 10 overflow auto; 11 } 12&#x9; 13 , 14 before, 15 after { 16 margin 0; 17 padding 0; 18 box sizing inherit; 19 } 20&#x9; 21 h1, 22 h2, 23 h3, 24 h4, 25 h5, 26 h6 { 27 margin 0; 28 font weight bold; 29 } 30&#x9; 31 p { 32 margin 0; 33 } 34&#x9; 35 body { 36 margin 0; 37 background color #fff; 38 } 39&#x9; 40 container { 41 width 100%; 42 max width 900px; 43 margin auto; 44 padding 20px 0; 45 text align left; 46 } 47&#x9; 48 header { 49 align items center; 50 padding 25px 0; 51 background color #208aec; 52 } 53&#x9; 54 header logo { 55 height 55px; 56 margin bottom 20px; 57 object fit contain; 58 } 59&#x9; 60 header text bold { 61 margin bottom 3px; 62 color rgba(255, 255, 255, 0 9); 63 font size 16px; 64 font weight bold; 65 } 66&#x9; 67 header text { 68 color rgba(255, 255, 255, 0 9); 69 font size 15px; 70 } 71&#x9; 72 heading { 73 font size 22px; 74 } 75&#x9; 76 flex { 77 display flex; 78 } 79&#x9; 80 flex between { 81 display flex; 82 justify content space between; 83 } 84&#x9; 85 flex child { 86 flex 0 0 45%; 87 } 88&#x9; 89 heading button { 90 margin left 12px; 91 } 92&#x9; 93 list item { 94 padding bottom 15px; 95 margin bottom 15px; 96 border bottom 1px solid rgba(0,0,0,0 06); 97 text align left; 98 } 99&#x9; 100 list item title { 101 color rgba(0,0,0,0 87); 102 font size 17px; 103 } 104&#x9; 105 list item description { 106 color rgba(0,0,0,0 5); 107 font size 15px; 108 } fazit am ende dieses leitfadens haben sie gelernt, wie sie die aktuellen parse benutzerdaten aus dem lokalen speicher in react abrufen im nächsten leitfaden zeigen wir ihnen, wie sie es ihrem benutzer ermöglichen, sein passwort zurückzusetzen