必须刷新才能更改基于自定义声明的导航ReactJS和Firebase自定义声明

问题描述

我目前正在研究一个涉及Firebase自定义声明的项目，它们需要管理员和用户角色。 我现在已经开始工作了。

当用户以管理员身份登录时，它会显示管理员导航栏，而当他们只是用户时，则会显示用户导航栏。

但是，直到用户刷新页面，我的导航才会改变。

解决这个问题的最佳方法是什么？

Header.js

import React,{ Component } 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 firebase = require("firebase");

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 auth={ auth }/>

            </div>
        
           

            
        </div>
    )
}

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


class Nav extends Component {
   state = {
      navType: 'public'
    }

    componentDidMount(){
        if (firebase.auth().currentUser == null) {
            console.log('public')
            this.setState({ navType: "public" }) 
          } else {
            firebase.auth().currentUser.getIdTokenResult()
             .then ((IdTokenResult) => {
                 console.log(IdTokenResult);
               if (!!IdTokenResult.claims.admin){
                this.setState({ navType: "admin" }) 
               } else {
                  this.props.auth.uid ? this.setState({ navType: "user" })  :  this.setState({ navType: "public" }) 
               }
            });
          }
    }
  
    
    render() {
        let nav = null;
        if (this.state.navType === "admin")
           nav = <AdminNavigation/>
                      else if(this.state.navType  === "user")
                      nav = <UserNavigation/>
                      else
                      nav = <PublicNavigation/> 
        return (
          <div>
            {nav}
          </div>
         );
      }
    }

export default connect(mapStatetoProps)(Header)

App.js

import React from 'react';
import { browserRouter,Switch,Route} from 'react-router-dom';

// Layout Components 
import Header from './components/Layout/Header/Header';
import Footer from './components/Layout/Footer/Footer';

// Public Access Pages
import PublicIndex from './components/Public/Index/Index';
import About from './components/Public/About/About';
import FAQ from './components/Public/FAQ/FAQ';
import Contact from './components/Public/Contact/Contact';

// Admin Access Pages


// User Access Pages

import CoursePortal from './components/User/CoursePortal/CoursePortal';
import LiveLessons from './components/User/LiveLessons/LiveLessons';

//Authentication Pages
import Login from './components/Auth/Login/Login';
import SignUp from './components/Auth/SignUp/SignUp';

function App() {
  
  return (
    <browserRouter>
    <div className="App">
    <Header/>
    <Switch>
        {/* path = the end of the URL || component = the page of which will be shown,as imported above */}

         {/* ADMIN ONLY PAGES */}
         


        {/* LOGGED IN USER ACCESS PAGES */}
        <Route exact path = '/livelessons' component = {LiveLessons} />
        <Route exact path = '/courseportal' component = {CoursePortal}/>

        {/* AUTHENTICATION PAGES */}
        <Route exact path ='/login' component = {Login}/>
        <Route exact path ='/signup' component = {SignUp}/>

        {/* PUBLIC ACCESS PAGES */}
        <Route exact path = '/contact' component = {Contact} />
        <Route exact path = '/FAQ' component = {FAQ} />
        <Route exact path = '/about' component = {About} />
        <Route exact path = '/' component = {PublicIndex} />
        

       
        
        
    </Switch>
    <Footer/>
    </div>
    </browserRouter>
  );
}

export default App;

解决方法

听起来您的Nav组件在身份验证状态更改后未更新。您将需要在组件中监听auth状态：

DialogService

这样，当auth状态更改时，Nav组件将自动更新其navType状态，然后以正确的权限重新呈现。