Javascript 使用if语句确定Firebase用户是否可以访问某些路由器路径

我有一个React web应用程序，通过React路由器定义路由

应用程序上的身份验证是通过Firebase完成的，我希望根据用户是否登录来保护某些路由

为了确定用户是否已登录，我使用了以下功能：

let user = firebase.auth().currentUser;

    if (user) {

    } else {

    }
  }

从那以后，我想我可以将“受保护”的路由放在初始路由中，如果这样可以确定用户是否登录，如下所示：

    let user = firebase.auth().currentUser;

    if (user) {
      <div>
      <Route path="/dashboard" component={Dashboard} exact />
      </div>

    } else {
      <Route path="/sign-in" component={SignIn} />
    }
  }

我知道逻辑是有缺陷的，但是有没有一种方法可以重构我的代码来实现这个非常简单的hack，从而使用Firebase Auth获得受保护的路由

希望这是明确的，让我知道如果任何更多的信息是必要的

编辑：根据答案编辑了我的代码，但现在收到以下错误消息：

TypeError: Right side of assignment cannot be destructured
PrivateRoute
src/PrivateRoute.js:8
   5 | import { AuthContext } from './Auth'
   6 | 
   7 | export default function PrivateRoute({ component: RouteComponent, ...rest }) {
>  8 |     const {currentUser} = useContext(AuthContext)
   9 |     return (
  10 |         <Route
  11 |         {...rest}

TypeError:无法对赋值的右侧进行分解
私家路
src/privaterote.js:8
5 |从“/Auth”导入{AuthContext}
6 | 
7 |导出默认函数PrivateRoute（{component:RouteComponent，…rest}）{
>8 | const{currentUser}=useContext（AuthContext）
9 |返回(
10 |          {
firebase.auth（）.onAuthStateChanged（setCurrentUser）；
}, []);
返回(
{儿童}
)
}

privaterout.js

import React, { useContext } from 'react';
import { Route, Redirect } from 'react-router-dom';
import { AuthContext } from './Auth'

export default function PrivateRoute({ component: RouteComponent, ...rest }) {
    const { currentUser } = useContext(AuthContext)
    return (
        <Route
        {...rest}
        render={routeProps =>
        !!currentUser ? (
            <RouteComponent {...routeProps} currentUser={currentUser} />
        ) : (
            <Redirect to={'/signin'}/>
        )
        }
        />
    )
}

import React，{useContext}来自“React”；
从“react router dom”导入{Route，Redirect}；
从“./Auth”导入{AuthContext}
导出默认函数PrivateRoute（{component:RouteComponent，…rest}）{
const{currentUser}=useContext（AuthContext）
返回(
！！当前用户(
) : (
)
}
/>
)
}

App.js

import React, { Component } from 'react';
import { BrowserRouter, Route, Switch } from 'react-router-dom';
import PrivateRoute from './PrivateRoute';
import './App.css';
import * as firebase from "firebase/app";
import "firebase/auth";
import "firebase/firestore";
import firebaseConfig from './firebaseConfig';


class App extends Component {

  render() {
    return (
      <div>

      <Switch>

      <PrivateRoute path="/dashboard" component={Dashboard} />
      <Route exact path="/" component={Homepage}  />
      <Route path="/sign-in" component={SignIn} />
      <Route path="/register" component={Register} />

      </Switch>

      </div>
    )
  }
}

export default App;

import React，{Component}来自'React'；
从“react router dom”导入{BrowserRouter，Route，Switch}；
从“/PrivateRoute”导入PrivateRoute；
导入“/App.css”；
从“firebase/app”导入*作为firebase；
导入“firebase/auth”；
导入“firebase/firestore”；
从“/firebaseConfig”导入firebaseConfig；
类应用程序扩展组件{
render（）{
返回(
)
}
}
导出默认应用程序；

this.userLoggedIn

是一个函数，因此它必须返回要呈现的JSX：

  userLoggedIn = () => {
    let user = firebase.auth().currentUser;

    if (user) {
      return (<div>
        <Route path="/dashboard" component={Dashboard} exact />
      </div>);
    } else {
      return <Route path="/sign-in" component={SignIn} />;
    }
  }

---

有两种方法可以解决这个问题并稍微清理一下

假设您只希望经过身份验证的用户访问仪表板页面

简易选项：

class App extends Component {
  
  state = {
    currentUser: undefined
  }

  componentDidMount(){
    const user = firebase.auth().currentUser
    this.setState({currentUser: user})
  }

render() {
    return (
      <div>

      <Switch>

      <Route exact path="/dashboard">
        {this.state.user ? (
          <Dashboard />
        ) : (
          <Redirect to={"/login"} />
        )}
      </Route>

      </Switch>

      </div>
    )
  }
}

import React, { useEffect, useState } from 'react'
import app from './base'

export const AuthContext  = React.createContext();

export function AuthProvider({ children }) {
    const  [currentUser, setCurrentUser] = useState(null);

    useEffect(() => {
        app.auth().onAuthStateChanged(setCurrentUser);
    }, []);

    return (
        <AuthContext.Provider
        value={{currentUser}}
        > 
            {children}
        </AuthContext.Provider>
    )
}

import React, { useContext } from 'react';
import { Route, Redirect } from 'react-router-dom';
import { AuthContext } from './Auth'

export default function PrivateRoute({ component: RouteComponent, ...rest }) {
    const currentUser = useContext(AuthContext)
    return (
        <Route
        {...rest}
        render={routeProps =>
        !!currentUser ? (
            <RouteComponent {...routeProps} currentUser={currentUser} />
        ) : (
            <Redirect to={'/login'}/>
        )
        }
        />
    )
}

注意事项：

class App extends Component {
  
  state = {
    currentUser: undefined
  }

  componentDidMount(){
    const user = firebase.auth().currentUser
    this.setState({currentUser: user})
  }

render() {
    return (
      <div>

      <Switch>

      <Route exact path="/dashboard">
        {this.state.user ? (
          <Dashboard />
        ) : (
          <Redirect to={"/login"} />
        )}
      </Route>

      </Switch>

      </div>
    )
  }
}

import React, { useEffect, useState } from 'react'
import app from './base'

export const AuthContext  = React.createContext();

export function AuthProvider({ children }) {
    const  [currentUser, setCurrentUser] = useState(null);

    useEffect(() => {
        app.auth().onAuthStateChanged(setCurrentUser);
    }, []);

    return (
        <AuthContext.Provider
        value={{currentUser}}
        > 
            {children}
        </AuthContext.Provider>
    )
}

import React, { useContext } from 'react';
import { Route, Redirect } from 'react-router-dom';
import { AuthContext } from './Auth'

export default function PrivateRoute({ component: RouteComponent, ...rest }) {
    const currentUser = useContext(AuthContext)
    return (
        <Route
        {...rest}
        render={routeProps =>
        !!currentUser ? (
            <RouteComponent {...routeProps} currentUser={currentUser} />
        ) : (
            <Redirect to={'/login'}/>
        )
        }
        />
    )
}

• 我将

  process.env……

  作为API键的值，因为将键保存在

  .env

  文件中始终是最佳做法

• Auth.js

  是我们在认证状态更改时处理获取认证用户的地方

Auth.js:

class App extends Component {
  
  state = {
    currentUser: undefined
  }

  componentDidMount(){
    const user = firebase.auth().currentUser
    this.setState({currentUser: user})
  }

render() {
    return (
      <div>

      <Switch>

      <Route exact path="/dashboard">
        {this.state.user ? (
          <Dashboard />
        ) : (
          <Redirect to={"/login"} />
        )}
      </Route>

      </Switch>

      </div>
    )
  }
}

import React, { useEffect, useState } from 'react'
import app from './base'

export const AuthContext  = React.createContext();

export function AuthProvider({ children }) {
    const  [currentUser, setCurrentUser] = useState(null);

    useEffect(() => {
        app.auth().onAuthStateChanged(setCurrentUser);
    }, []);

    return (
        <AuthContext.Provider
        value={{currentUser}}
        > 
            {children}
        </AuthContext.Provider>
    )
}

import React, { useContext } from 'react';
import { Route, Redirect } from 'react-router-dom';
import { AuthContext } from './Auth'

export default function PrivateRoute({ component: RouteComponent, ...rest }) {
    const currentUser = useContext(AuthContext)
    return (
        <Route
        {...rest}
        render={routeProps =>
        !!currentUser ? (
            <RouteComponent {...routeProps} currentUser={currentUser} />
        ) : (
            <Redirect to={'/login'}/>
        )
        }
        />
    )
}

---

这是一个很好的答案。最后一段代码是我的app.js中的代码（这就是我当前的路线，假设我沿着上下文路线走）？我的其他链接会保持不变吗？就像我的登录/注册等是什么样的？正是如此，因此您可以使用

privaterout

，就像

Route

（就像您如何指示路径和声明要渲染的组件一样）对于您希望通过身份验证的组件，以及对于您希望每个人都可以访问的组件，从“react router dom”正常的

路由

。再次感谢您的回复！我已经尝试过实现代码。。。不幸的是，我得到了这个错误：TypeError：赋值的右边不能被分解。我会更新我原来的问题，但是你能帮忙吗？当然，你是这样导入useContext钩子的：

import React，{useContext}来自'React'？再次感谢您的回复！不幸的是，我的PrivateRoute.js文件中仍然出现相同的错误。我试着用谷歌搜索错误以查看解构，以及如何更改它，但我觉得我对它了解得不够。虽然我热衷于使用这个解决方案，因为它比我的想法干净得多。