Блог

Я создаю веб-приложение, используя React для проекта. Я использую аутентификацию Firebase и базу данных в реальном времени для хранения своих пользователей. Я хотел бы назначить одного конкретного пользователя администратором и сделать страницу администратора на моей панели навигации видимой только для этого пользователя. Однако у меня возникли проблемы с получением пользователя из базы данных или использованием скрытого атрибута JSX. Любая помощь будет признательна, спасибо.

Я отметил важные разделы с помощью //здесь

Файл Firebase

 import firebase from "firebase";
import 'firebase/auth';
import 'firebase/database';

const config = {
  ...
  };

  class Firebase {
    constructor() {
      firebase.initializeApp(config);
      firebase.analytics();

      this.auth = firebase.auth();
      this.db = firebase.database();
    }

    doCreateUserWithEmailAndPassword = (email, password) =>
    this.auth.createUserWithEmailAndPassword(email, password);

    doSignInWithEmailAndPassword = (email, password) =>
    this.auth.signInWithEmailAndPassword(email, password);

    doSignOut = () => this.auth.signOut();

    doPasswordReset = email => this.auth.sendPasswordResetEmail(email);
 
    doPasswordUpdate = password =>
    this.auth.currentUser.updatePassword(password);

    user = uid => this.db.ref(`users/${uid}`);

    adminuser = () => this.db.ref(`users/vU6rm45ZTyQFEkX2FgkuqOjauuO2`) //here 

    users = () => this.db.ref('users');

  }

  export default Firebase;
 

Файл навигации

 import React from "react";
import {
    Nav,
    NavLink,
    Bars,
    NavMenu,
    NavBtn,
    NavBtnLink
} from './NavBar'
import SignOutButton from '/Users/dogualemdar/Desktop/Coding/kocmun/src/components/SignOut/index.js'
import * as ROUTES from './routes';
import Firebase from "../Firebase";

const Navigation = ({ authUser }) => (
  <div>{authUser ? <NavigationAuth /> : <NavigationNonAuth />}</div>
);

const NavigationAuth = () => (
    <>
    <Nav>
      <NavLink to = {ROUTES.HOME}>
       <img src = "http://kocmun.mydp.tech/kocmun_icon.png" alt= "Not Found" width = "75" height = "75"/>
      </NavLink>
      <Bars />
      <NavMenu>
          <NavLink to = {ROUTES.PROFILE} activeStyle>
              Profile
          </NavLink>
          <NavLink to = {ROUTES.ADMIN} activeStyle hidden = {!Firebase.adminuser} > //here
              Admin
          </NavLink>
          <NavLink to = {ROUTES.PWFORGET} activeStyle>
              Reset Password
          </NavLink>
      </NavMenu>
      <NavBtn>
        <NavBtnLink to = {ROUTES.HOME}>
          <SignOutButton /> 
        </NavBtnLink>
      </NavBtn>
    </Nav>
  </>
  );

const NavigationNonAuth = () => (
    <>
      <Nav>
        <NavLink to = {ROUTES.HOME}>
         <img src = "http://kocmun.mydp.tech/kocmun_icon.png" alt= "Not Found" width = "75" height = "75"/>
        </NavLink>
        <Bars />
        <NavMenu>
            <NavLink to = {ROUTES.ABOUT} activeStyle>
                About
            </NavLink>
            <NavLink to = {ROUTES.ENTRY} activeStyle>
                Entry Requirements
            </NavLink>
            <NavLink to = {ROUTES.CONTACTUS} activeStyle>
                Contact Us
            </NavLink>
        </NavMenu>
        <NavBtn>
            <NavBtnLink to = {ROUTES.SIGNIN}> Sign In </NavBtnLink>
        </NavBtn>
      </Nav>
    </>
);

export default Navigation;