Rumah > Soal Jawab > teks badan
P粉0378809052023-08-27 12:25:17
Untuk menyemak sama ada pengguna telah log masuk, anda boleh menggunakan kaedah 'onAuthStateChanged'.
Simpan maklumat ini dalam keadaan komponen, atau gunakannya untuk membuat bahagian komponen secara bersyarat.
import React, { useEffect, useState } from 'react'; import firebase from 'firebase/app'; import 'firebase/auth'; export default function Home() { const [user, setUser] = useState(null); useEffect(() => { const unsubscribe = firebase.auth().onAuthStateChanged(user => { setUser(user); }); return () => unsubscribe(); }, []); return ( <main> <h1>Hello World</h1> {user ? ( <p>authenticated user</p> ) : null} </main> ); }
Untuk melaksanakan pengesahan pengguna di bahagian pelayan, Next.js menyediakan 'getServerSideProps' untuk mendapatkan status pengesahan pengguna
import firebase from 'firebase/app'; import 'firebase/auth'; export default function Home({ user }) { return ( <main> <h1>Hello World</h1> {user ? ( <p>authenticated user</p> ) : null} </main> ); } export async function getServerSideProps(context) { const user = await new Promise((resolve, reject) => { firebase.auth().onAuthStateChanged(user => { resolve(user); }); }); return { props: { user, }, }; }
Penyelesaian terkini:
Buat laluan sebelah pelayan
import firebase from 'firebase/app'; import 'firebase/auth'; import express from 'express'; const app = express(); app.get('/api/user', async (req, res) => { const user = await new Promise((resolve, reject) => { firebase.auth().onAuthStateChanged(user => { resolve(user); }); }); res.send(user); }); app.listen(3000, () => { console.log('Server started at http://localhost:3000'); });
Kod pelanggan
import React, { useState, useEffect } from 'react'; import axios from 'axios'; export default function Home() { const [user, setUser] = useState(null); useEffect(() => { const fetchUser = async () => { const res = await axios.get('http://localhost:3000/api/user'); const user = res.data; setUser(user); }; fetchUser(); }, []); return ( <main> <h1>Hello World</h1> {user ? ( <p>authenticated user</p> ) : null} </main> ); }