Rumah  >  Soal Jawab  >  teks badan

Memaparkan komponen berasaskan Next.js secara bersyarat: Bagaimana untuk bergantung pada sama ada permintaan itu datang daripada pengguna Firebase yang disahkan?

<p><strong>Nota: </strong>Saya menggunakan Next.js 13 dan direktori <code>app/</code> </p> <hr /> <p>Saya sedang belajar Firebase dan Next.js dan saya cuba memahami cara menyelesaikan masalah mainan. Katakan saya mempunyai <code>Home()</code>Component</p> <p><strong><code>/app/page.jsx</code></strong></p> <pre class="brush:php;toolbar:false;">eksport fungsi lalai Laman Utama() { kembali ( <utama> <h1>Hello World</h1> <p>Hanya pengguna yang disahkan boleh melihat teks ini</p> </utama> ) }</pre> <p>Matlamat saya adalah untuk menjadikan semua dalam <kod><p>...</p></code> berdasarkan sama ada pengguna yang meminta halaman itu adalah pengguna yang log masuk. Firebase menjadikan bahagian pelayan komponen ini menggunakan JWT, Next.js 13, jadi saya percaya ini boleh dilakukan, tetapi saya tidak dapat mengetahui cara melakukannya. </p> <p>Saya tahu tentang onAuthStateChanged, tetapi setakat yang saya tahu ini hanya boleh digunakan pada bahagian klien. (Pengguna Savvy masih boleh melihat kandungan yang dilindungi ini.) Bagaimanakah cara melindungi kandungan ini <em>sebelah pelayan</em>? </p>
P粉616111038P粉616111038443 hari yang lalu547

membalas semua(1)saya akan balas

  • P粉037880905

    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>
      );
    }

    balas
    0
  • Batalbalas