# #javascript #reactjs #firebase-authentication #next.js
Вопрос:
Я работаю на веб-сайте электронной коммерции, используя next js и firebase для аутентификации и в качестве источника базы данных . Тем не менее , я выяснил, как зарегистрироваться с помощью аутентификации firebase . Я пытаюсь понять, как отобразить информацию о моих пользователях, т. е. имя, в компоненте заголовка моего проекта
Вот файл конфигурации firebase
import firebase from "firebase"; const firebaseConfig = { apiKey: "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx", authDomain: "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx", projectId: "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx", storageBucket: "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx", messagingSenderId: "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx", appId: "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx", measurementId: "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx" }; // Initialize Firebase if (!firebase.apps.length) { firebase.initializeApp(firebaseConfig);} export{firebase}
Вот мой компонент заголовка . я хочу отобразить его в ЧАСТИ ПРИВЕТСТВИЯ
import Image from "next/image"; import 'tailwindcss/tailwind.css' import { getAuth } from "firebase/auth"; import firebase from "../Firebase/Firebase"; // import { signIn, signOut, useSession } from "next-auth/client" import { MenuIcon, SearchIcon, ShoppingCartIcon } from "@heroicons/react/outline"; function Header() { const auth = getAuth(); const customer = auth.currentUser; if (user !== null) { // The user object has basic properties such as display name, email, etc. const displayName = user.displayName; const email = user.email; const photoURL = user.photoURL; const emailVerified = user.emailVerified; // The user's ID, unique to the Firebase project. Do NOT use // this value to authenticate with your backend server, if // you have one. Use User.getToken() instead. const uid = user.uid; } const user = firebase.auth().currentUser; if (user !== null) { // The user object has basic properties such as display name, email, etc. const displayName = user.displayName; const email = user.email; const photoURL = user.photoURL; const emailVerified = user.emailVerified; // The user's ID, unique to the Firebase project. Do NOT use // this value to authenticate with your backend server, if // you have one. Use User.getToken() instead. const uid = user.uid; } return ( lt;divgt; lt;div className="flex items-center bg-amazon_blue p-1 flex-grow py-2"gt; {/* top nav */} lt;div className=" mt-2 flex items-center flex-grow sm:flex-grow-0"gt; lt;Image src="https://links.papareact.com/f90" width={150} height={40} objectFit="contain" className="cursor-pointer" /gt; lt;/divgt; {/* bottom nav */} {/* Search bar */} lt;div className="hidden sm:flex items-center h-10 cursor-pointer flex-grow rounded-md bg-yellow-400 hover:bg-yellow-500"gt; lt;input className="p-2 h-full w-6 flex-grow flex-shrink rounded-l-md focus:outline-none px-4 " type="text" /gt; lt;SearchIcon className="h-12 p-4" /gt; lt;/divgt; {/* Rigth */} lt;div className="text-white flex items-center text-xs space-x-6 mx-6 whitespace-nowrap"gt; lt;div onClick={SigninWithFirebase} className="signIn cursor-pointer links"gt; lt;pgt;`hello ${displayName}`lt;/pgt; lt;p className="font-extrabold md:text-sm"gt;Account amp; listlt;/pgt; lt;/divgt; lt;div className="cursor-pointer links"gt; lt;pgt;Returnslt;/pgt; lt;p className="font-extrabold md:text-sm"gt;Orderslt;/pgt; lt;/divgt; lt;div className="cursor-pointer relative links flex items-center"gt; lt;span className="absolute top-0 right-0 md:right-10 h-4 w-4 bg-yellow-400 text-center rounded-full text-black font-bold"gt; 0lt;/spangt; lt;ShoppingCartIcon className="h-10" /gt; lt;p className="hidden md:inline font-extrabold md:text-sm mt-2"gt;Basketlt;/pgt; lt;/divgt; lt;/divgt; lt;/divgt; lt;div className="space-between flex items-center space-x-3 p-2 pl-6 bg-amazon_blue-light text-white text-sm "gt; lt;p className="link flex items-center"gt; lt;MenuIcon className="h-6 mr-1" /gt; All lt;/pgt; lt;p className="link"gt;Menlt;/pgt; lt;p className="link"gt;Womenlt;/pgt; lt;p className="link"gt;Shoeslt;/pgt; lt;p className="link "gt;Accessories lt;/pgt; lt;p className="link hidden lg:inline-flex"gt;Latestlt;/pgt; lt;p className="link hidden lg:inline-flex"gt;Latestlt;/pgt; lt;p className="link hidden lg:inline-flex"gt;Latestlt;/pgt; lt;/divgt; lt;/divgt; ) } export default Header
Комментарии:
1. мой друг, ты должен сделать немного больше, заглядывая в 1) опорный пункт В9 С JS SDK для (вы растратите ее; ты не должен называть
firebase.auth()
) и 2) регулировать состояние в React — имейте в виду,Header
называется на каждый рендер , и там наверняка есть какая-то логика в том, что вы только хотите запустить один раз. Если вы хотите, чтобы ваше приложение реагировало на состояние аутентификации, вам нужно будет использовать крючки для хранения этого состояния или использовать какую-либо библиотеку управления состоянием, например mobx, для хранения состояния, на которое затем можно ссылаться в ваших компонентах.2. Дружеский совет: удалите/измените заполнители на реальные ключи и идентификаторы из конфигурации firebase. срочно