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

Question

Nota: Saya menggunakan Next.js 13 dan direktori app/

---

Saya sedang belajar Firebase dan Next.js dan saya cuba memahami cara menyelesaikan masalah mainan. Katakan saya mempunyai Home()Component

/app/page.jsx

eksport fungsi lalai Laman Utama() {
  kembali (
    <utama>
      <h1>Hello World</h1>
      <p>Hanya pengguna yang disahkan boleh melihat teks ini</p>
    </utama>
  )
}

Matlamat saya adalah untuk menjadikan semua dalam

...

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.

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 sebelah pelayan?

Answer 1

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