Question

我是新来的反应者，我正在尝试创建一个安全区域。我的应用程序的文件结构如下：

build
node_modules
public
src
  AboutScreen
  AdminDash
  ContactScreen
  HomeScreen
  LoginScreen
  SignUpScreen
  WorkRequestScreen
  App.js
  index.js
  routes.js
  serviceWorker.js
package.json
package-lock.json

我的路由在App.js中完成。该文件如下所示：

import React, { Component } from 'react';
import { Route, Redirect } from 'react-router-dom';

import Home from './HomeScreen/Home';
import WorkReq from './WorkRequestScreen/WorkReq';
import About from './AboutScreen/About';
import Contact from './ContactScreen/Contact';
import Login from './LoginScreen/Login';
import Signup from './SignUpScreen/Signup';
import adminDash from './AdminDash/AdminDash';

const fakeAuth = {
  isAuthenticated: false,
  authenticate(cb) {
    this.isAuthenticated = true
    setTimeout(cb, 100)
  },
  signout(cb) {
    this.isAuthenticated = false
    setTimeout(cb, 100)
  }
}

const PrivateRoute = ({ component: Component, ...rest }) => (
  <Route {...rest} render={(props) => (
    fakeAuth.isAuthenticated === true
      ? <Component {...props} />
      : <Redirect to={{
          pathname: '/login',
          state: { from: props.location }
        }} />
  )} />
)

class App extends Component {
  render() {
    return (
      <div>
        <PrivateRoute path='/adminDash' component={adminDash} />
        <Route exact path="/workReq" render={(props) => <WorkReq {...props}/>} />
        <Route exact path="/about" component={About}/>
        <Route exact path="/contact" component={Contact}/>
        <Route exact path="/login" component={Login}/>
        <Route exact path="/signup" component={Signup}/>
        <Route exact path="/" component={Home}/>
      </div>
    );
  }
}

export default App;

我的登录组件如下：

import App from '../App';

class LoginScreen extends Component {
  super(props);
  this.state = {
    redirectToReferrer: false,
  };

  login = () => {
    App.fakeAuth.authenticate(() => {
      this.setState(() => ({
        redirectToReferrer: true
      }))
    })
  }

  render() {

    const { from } = this.props.location.state || { from: { pathname: '/' } }
    const { redirectToReferrer } = this.state

    if (redirectToReferrer === true) {
      return <Redirect to={from} />
    }

    return (
      <div className='buttonCont'>
        <button size='lg' type='button' onClick={this.login.bind(this)}>HIT IT!</button>
      </div>
    );
  }
}

当前，这不会将用户重定向到另一个页面，而是会将他们重定向到AdminDev。我得到的错误是：

TypeError：无法读取未定义的属性“ authenticate”（login.js）

问题行是：App.fakeAuth.authenticate(() => {。我想知道的是我是在正确做这件事，还是完全错过了这个主意？

我一直在关注这两篇文章：

https://tylermcginnis.com/react-router-protected-routes-authentication/ https://auth0.com/blog/react-router-4-practical-tutorial/

Answer 1

由于未从Flatlist文件中导出fakeAuth，因此出现此错误。将App.js对象放入一个单独的文件，即fakeAuth，然后从那里导出。

auth.js

然后，将其像这样导入// auth.js const fakeAuth = { isAuthenticated: false, authenticate(cb) { this.isAuthenticated = true setTimeout(cb, 100) }, signout(cb) { this.isAuthenticated = false setTimeout(cb, 100) } } export { fakeAuth }和App.js组件中。

Login.js

ReactJS-使用React Router 4进行身份验证

1 个答案: