使用 HOC 对身份验证做出反应

Question

如果用户未经过身份验证，并且我尝试使用 HOC 在前端检查身份验证，则服务器将发送 401 响应，如使用 react-router-v4 对路由执行身份验证中所示。但是，我在“需要身份验证”中收到一个错误TypeError: Cannot read property 'Component' of undefined

需要身份验证.js

import {React} from 'react'

import {Redirect} from 'react-router-dom'

const RequireAuth = (Component) => { 

    return class Apps extends React.Component { 

        state = {

            isAuthenticated: false,

            isLoading: true

        }

        async componentDidMount() {

            const url = '/getinfo'

            const json = await fetch(url, {method: 'GET'})

            if (json.status !== 401)    

                this.setState({isAuthenticated: true, isLoading: false})

            else

                console.log('not auth!')

        } 

        render() { 

           const { isAuthenticated, isLoading } = this.state;

           if(isLoading) {

               return <div>Loading...</div>

           }

           if(!isAuthenticated) {

               return <Redirect to="/" />

           }

           return <Component {...this.props} /> 

        }

    } 

} 

export { RequireAuth }

应用.js

import React from 'react';

import { BrowserRouter as Router, Route, Switch, withRouter } from 'react-router-dom';

import SignIn from './SignIn'

import NavigationBar from './NavigationBar'

import LandingPage from './LandingPage'

import Profile from './Profile'

import Register from './Register'

import { RequireAuth } from './RequireAuth'

class App extends React.Component {

  constructor(props) {

    super(props);

  }

  render() { 

  return (

    <div>

      <Router>

            <NavigationBar />

            <Switch>

              <Route exact path = '/'

                component = {LandingPage}

              />

              <Route exact path = '/register'

                component = {Register}

              />

              <Route exact path = '/profile' 

                component = {RequireAuth(Profile)}

              />

              <Route path="*" component = {() => "404 NOT FOUND"}/>

            </Switch>

      </Router>

    </div>

  );

}

}

Answer 1

我可以想到一些可能性：------- 将其移至顶部，最终修复了OP的问题-------尝试在 处取下大括号。{React}import&nbsp;React&nbsp;from&nbsp;'react';------- 将其移至顶部，最终修复了OP的问题-------在“需要身份验证.js”中，尝试const&nbsp;RequireAuth&nbsp;=&nbsp;({&nbsp;Component&nbsp;})&nbsp;=>&nbsp;{}&nbsp;//&nbsp;changed&nbsp;from&nbsp;Component&nbsp;to&nbsp;{&nbsp;Component&nbsp;}在 App.js中，使用以大写字母开头的组件<Route&nbsp;exact&nbsp;path&nbsp;=&nbsp;'/'&nbsp;Component&nbsp;=&nbsp;{LandingPage}/>另外，在 中，看起来你没有传入 React 组件，因为该函数没有返回 JSX（我现在无法测试，所以我不是很确定）。<Route path="*" component = {() => "404 NOT FOUND"}/>试试这个：()&nbsp;=>&nbsp;<div>404&nbsp;NOT&nbsp;FOUND</div>或者，如果它不起作用，则在外部定义一个功能组件并传递到 ：Routeconst&nbsp;NotFoundComponent&nbsp;=&nbsp;()&nbsp;=>&nbsp;<div>404&nbsp;NOT&nbsp;FOUND</div><Route&nbsp;path="*"&nbsp;component&nbsp;=&nbsp;{NotFoundComponent}/>

Answer 2

尝试像这样做：const&nbsp;RequireAuth&nbsp;=&nbsp;({&nbsp;component:&nbsp;Component&nbsp;})&nbsp;=>&nbsp;{}