ReactJS - аутентификация с помощью React Router 4

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;

Компонент My Login выглядит следующим образом:

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

Вы получаете эту ошибку, потому что 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 следующим образом.

import { fakeAuth } from './path-to-auth-js-file';