ReactJS中的Firebase自定义声明||显示管理界面

问题描述

我正在尝试在我的React App中创建一个登录系统，它应该显示不同的UI（目前是不同的导航栏），具体取决于用户是否具有管理员自定义令牌，用户自定义令牌或未登录用户内。

当前，管理员用户会获得令牌，但是我不确定如何根据用户拥有的令牌来更改UI。

代码：

Header.js

import React from 'react';
import {Link} from 'react-router-dom';
import './Header.scss';
import PublicNavigation from '../PublicLinks/PublicLinks';
import AdminNavigation from '../AdminLinks/AdminLinks';
import UserNavigation from '../UserLinks/UserLinks';
import SignUpButton from '../SignUpButton/SignUpButton';
import { connect } from 'react-redux';
import logout from '../logout/logout'

const Header = (props) => {
    // Firebase Login Check -- This is what changes the navigation based on whether the user is logged in or not!
    const {auth } = props;
    // console.log(auth);
    const nav = auth.uid ? <UserNavigation/> : <PublicNavigation/> 
    const button = auth.uid ? <logout/> : <SignUpButton/>

    return (
      <div className = "Header">

            <div className = "logo">
                {/* Company logo */}
                <h1 className = "CompanyName"> logo.</h1>
            </div>

            {/* These are the login,signup and log out buttons */}
            { button }

            <div className = "Navigation"> 

            { nav }

            </div>
        
           

            
        </div>
    )
}

const mapStatetoProps = (state) => {
    return {
        auth: state.firebase.auth
    }
}

export default connect(mapStatetoProps)(Header) 

functions / index.js

const functions = require('firebase-functions');
const admin = require('firebase-admin');
admin.initializeApp();

exports.addAdminRole = functions.https.onCall((data,context) => {
  // get user and add admin custom claim
  return admin.auth().getUserByEmail(data.email).then(user => {
    return admin.auth().setCustomUserClaims(user.uid,{
      admin: true
    })
  }).then(() => {
    return {
      message: `Success! ${data.email} has been made an admin.`
    }
  }).catch(err => {
    return err;
  });
});

解决方法

您的逻辑似乎正确。您已经完成了大部分工作。

所有您需要做的就是弄清楚谁登录了。管理员还是其他人？ 我看到您有一个auth对象，我认为您可以了解登录的用户类型。一旦获得该信息，您的代码即可正常工作。

const nav = auth.uid ? <UserNavigation/> : <PublicNavigation/>

我不确定auth是否有userType字段，但是肯定有类似的内容。

示例：

const Nav = () => {
   if(auth.userType === "admin")
    return <AdminNav/>
   else if(auth.userType === "user")
    return <UserNav/>
   else
    return <PublicNav/>
}

然后您可以在渲染函数中将其用作<Nav/>。

下面是一个非常基本的示例。

https://stackblitz.com/edit/react-hmjkmq?file=src/App.js