ออกจากระบบผู้ใช้ใน React Native ด้วย Relay และ GraphQL

การออกจากระบบผู้ใช้ react native บทนำ ในขั้นตอนนี้คุณจะสร้างการออกจากระบบผู้ใช้สำหรับ react native โดยใช้ relay ซึ่งเป็นการนำไปใช้ล่าสุดสำหรับส่วนของผู้ใช้ นี้เป็นขั้นตอนที่ง่ายและเราจะทำตาม https //www back4app com/docs/parse graphql/graphql logout mutation จากคู่มือ graphql ของเรา คุณจะดำเนินการสร้างการออกจากระบบและเรียกใช้มันโดยใช้ปุ่มในแอปพลิเคชัน react native ในทุกเวลา คุณสามารถเข้าถึงโครงการนี้ผ่านที่เก็บ github ของเราเพื่อตรวจสอบสไตล์และโค้ดที่สมบูรณ์ https //github com/templates back4app/react native graphql relay js users เป้าหมาย เพื่อดำเนินการฟีเจอร์ออกจากระบบในแอป react native ของเราโดยใช้ relay และ back4app graphql api ข้อกำหนดเบื้องต้น สำหรับบทเรียนนี้เราจะใช้ parse server ในเวอร์ชัน 4 4 หากคุณต้องการใช้เวอร์ชันอื่นคุณสามารถตรวจสอบรหัสการเปลี่ยนแปลงที่เกี่ยวข้องได้ที่ https //www back4app com/docs/parse graphql/graphql logout mutation ตัวอย่างสำหรับเวอร์ชันที่คุณต้องการ คุณต้องทำให้เสร็จสิ้น https //www back4app com/docs/react native/graphql/relay setup คุณต้องทำให้เสร็จสิ้น https //www back4app com/docs/react native/graphql/users/react native login sample คุณต้องทำให้เสร็จสิ้น https //app archbee com/docs/ roxiyumxobue9i7uv49e/6qyoyumfldrtjjy7dcgnr สำหรับบทเรียนนี้เราจะใช้ expo เป็นเฟรมเวิร์ก react native; สำหรับบทเรียนนี้เราจะใช้ javascript เป็นภาษาการใช้งานเริ่มต้นของเรา; 1 การสร้างการเปลี่ยนแปลงการออกจากระบบ กลับไปที่โฟลเดอร์ signin ในโฟลเดอร์การเปลี่ยนแปลงให้สร้างไฟล์ใหม่และตั้งชื่อว่า logoutmutation js logoutmutation js คัดลอกและวางโค้ดต่อไปนี้ภายใน 1 import { commitmutation, graphql } from 'react relay'; 2&#x9; 3 const mutation = graphql` 4 mutation logoutmutation($input logoutinput!) { 5 logout(input $input) { 6 clientmutationid 7 } 8 } 9 `; 10&#x9; 11 function commit({ environment, input, oncompleted, onerror }) { 12 const variables = { input }; 13&#x9; 14 commitmutation(environment, { 15 mutation, 16 variables, 17 oncompleted, 18 onerror, 19 }); 20 } 21&#x9; 22 export default { 23 commit, 24 }; รัน yarn relay yarn relay ในเทอร์มินัลของคุณเพื่ออัปเดตประเภทของ relay 2 สร้างปุ่มออกจากระบบ ตอนนี้ เปิดไฟล์ formsignin js formsignin js คอมโพเนนต์ มาลองเพิ่มปุ่มออกจากระบบและเรียกใช้ relay mutation กันเถอะ นำเข้า relay mutation ใหม่ที่จุดเริ่มต้นของไฟล์ 1 import logoutmutation from " /mutations/logoutmutation"; จากนั้น สร้างฟังก์ชันที่รับผิดชอบในการเรียกใช้ logout mutation 1 const handlelogout = async () => { 2 logoutmutation commit({ 3 environment environment, 4 input {}, 5 oncompleted async () => { 6 await asyncstorage removeitem('sessiontoken'); 7 setsessiontoken(null); 8 alert('user successfully logged out'); 9 }, 10 onerror (errors) => { 11 alert(errors\[0] message); 12 }, 13 }); 14 }; เกิดอะไรขึ้นใน oncompleted oncompleted มันกำลังลบโทเค็นเซสชันจาก async storage เพราะมันไม่ถูกต้องอีกต่อไป กำลังทำความสะอาด usestate ท้องถิ่นที่ดึงโทเค็นเซสชันด้วยเหตุผลเดียวกันข้างต้น แสดงการแจ้งเตือนว่าผู้ใช้ได้ออกจากระบบเรียบร้อยแล้ว หลังจากนั้น ใต้ userloggedrenderer ให้เรานำปุ่มที่รับผิดชอบในการเรียกออกจากระบบมาใช้ จาก 1 if (sessiontoken) { 2 return \<userloggedrenderer />; 3 } เพื่อ 1 if (sessiontoken) { 2 return ( 3 <> 4 \<userloggedrenderer /> 5 \<button title={'logout'} onpress={() => handlelogout()} /> 6 \</> 7 ) 8 } นำเข้า button จากไลบรารี react native import { button, text, textinput, view, touchableopacity } from "react native" import { button, text, textinput, view, touchableopacity } from "react native" ; หน้าจอแอปพลิเคชันควรมีลักษณะดังนี้ 3 การทดสอบ การทดสอบปุ่ม เมื่อคลิกจะต้องทำการออกจากระบบและแสดงการแจ้งเตือน และหลังจากนั้นควรกลับไปที่หน้าล็อกอิน บทสรุป ตอนนี้คุณได้ดำเนินการฟีเจอร์การตรวจสอบผู้ใช้หลักที่จำเป็นสำหรับแอปพลิเคชันใด ๆ แล้ว ผู้ใช้ของคุณสามารถลงทะเบียน เข้าสู่ระบบ นำทางในพื้นที่ที่ได้รับการตรวจสอบ และออกจากระบบจากแอป react native ของคุณโดยใช้ relay และ back4app graphql api