Проверка подлинности маршрутизатора не работает, как сказано в документации - PullRequest
Новая
       35

Проверка подлинности маршрутизатора не работает, как сказано в документации

0 голосов
/ 26 сентября 2018

Я хочу аутентифицировать некоторые маршруты и следовал документации на веб-сайте react-router-dom, единственное отличие состоит в том, что я использовал отдельные компоненты вместо одного большого файла, полного классов, но он не работает.

Вотмой app.js файл 

import React, { Component } from 'react';
import 'react-notifications/lib/notifications.css';
import { BrowserRouter as Router, Switch, Route } from 'react-router-dom';

// Component
import Login from 'layouts/login';
import Home from 'layouts/home';
import Register from 'layouts/register';

// private route
import PrivateRoute from 'utils/private-routes';

// auth
import auth from 'utils/auth';

class App extends Component {

  render() {
    return (
      <Router>
        <div className="App">
          <Switch>
            <Route path="/" component={ Home } exact />
            <Route path="/login" component={ Login } />
            <PrivateRoute path="/register" component={ Register } />
          </Switch>
        </div>
      </Router>
    );
  }
}

мой login.js файл 

import React, { Component } from 'react';
import { NotificationContainer, NotificationManager } from 'react-notifications';
import { withRouter, Redirect } from 'react-router-dom';
import auth from 'utils/auth';
import { post } from 'utils/api';

class Login extends Component {

  constructor(props) {

    super(props);

    this.state = { email : 'admin@admin.com', password : 'password', redirect : false }

  }

  handle_Input = (e) => {

    this.setState({ [e.target.id] : e.target.value })

  }

  login = async () => {

    let response = await post('api/users/login', { email : this.state.email, password : this.state.password } );

    response.hasOwnProperty('err') ? NotificationManager.error('Error', reqponse.err) :

    NotificationManager.success('Success', 'Logged In Successfully')

    auth.authenticate();

    await this.props.history.push('/register')

  }

  render() {

    return (
      <div className="page-background">
        <div className="login-box">
          <div className="login-content">
            <h3>Login To Dashboard</h3>
          </div>

          <div className="login-form">

              <div className="input-group ls-group-input">
                <input onChange={ this.handle_Input } className="form-control" autoComplete="off" id="email" type="text" placeholder="Username" />
                <span className="input-group-addon"><i className="fa fa-user"></i></span>
              </div>

              <div className="input-group ls-group-input">
                <input onChange={ this.handle_Input } type="password" placeholder="Password" className="form-control" autoComplete="off" id="password" />
                <span className="input-group-addon"><i className="fa fa-lock"></i></span>
              </div>


              <div className="input-group ls-group-input">
                <button onClick={ this.login } type="submit" className="btn btn-info">Login</button>
              </div>

          </div>
        </div>
        <NotificationContainer />
      </div>
    )
  }
}

export default withRouter(Login);

мой private-routes.js файл 

import React from 'react';
import { Route, Redirect } from 'react-router-dom';
import auth from 'utils/auth';

const PrivateRoute = ({ component : Component, authenticated, ... rest, }) => {
  console.log(auth.is_authenticated);
  return (
    <Route { ...rest } render={ (props) => (
      auth.is_authenticated === true
      ? <Component { ...props } />
      : <Redirect to="/login" />
    ) } />
  )
}

export default PrivateRoute;

и мой auth.js файл 

const auth = {

  is_authenticated : false,

  authenticate : (cb) => {
    this.is_authenticated = true;
  },

  logout : () => this.is_authenticated = false,

}

export default auth;

Я сделал console.log(auth.is_authenticated), и, похоже, он не изменится, кроме как внутри файла auth.js, но даже если это так, я проверяю значение непосредственно из файла, используя auth.is_authenticated.Это правильно?

Почему не работает?

...