Возникла проблема при реализации аутентификации в реагировании - PullRequest
Новая
       12

Возникла проблема при реализации аутентификации в реагировании

0 голосов
/ 12 марта 2019

Я пытаюсь внедрить аутентификацию JWT в моем приложении, она сталкивается с проблемой, пожалуйста, помогите мне решить эту проблему, поскольку я новичок в реагировании.

После успешного входа я получаю сообщение об ошибке ниже:

Неизвестное нарушение инварианта: Не удалось найти «store» ни в контексте, ни в подпунктах «Connect (App)». Либо оберните корневой компонент в, либо явно передайте «store» в качестве реквизита «Connect (App)».

main App.js 

import React from 'react';
import { Router, Route, Link } from 'react-router-dom';
import { PrivateRoute } from './_components';
import { LoginPage } from './LoginPage';
import { history, Role } from './_helpers';
// css
import './lib/reactifyCss';


// app component
import App from './container/App';


class MainApp extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      currentUser: null,
      isAdmin: false
    };
  }


  render() {
    return (
      <Router history={history}>
        <div>              
          <div className="jumbotron">
            <div className="container">
              <div className="row">
                <div className="col-md-6 offset-md-3">
                  <PrivateRoute exact path="/" component={App} />
                  <Route path="/login" component={LoginPage} />
                </div>
              </div>
            </div>
          </div>
        </div>
      </Router>
    );
  }
}

export { MainApp };

макет приложения. Js 

/**
 * App.js Layout Start Here
 */
import React, { Component } from 'react';
import { connect } from 'react-redux';
import { Redirect, Route } from 'react-router-dom';
import { NotificationContainer } from 'react-notifications';

// rct theme provider
import RctThemeProvider from './RctThemeProvider';

//Main App
import RctDefaultLayout from './DefaultLayout';



class App extends Component {
    render() {

        return (
            <RctThemeProvider>
                <NotificationContainer />               
        <Route path="/app/dashboard" component={RctDefaultLayout} />
            </RctThemeProvider>
        );
    }
}

// map state to props
const mapStateToProps = ({ authUser }) => {
    const { user } = authUser;
    return { user };
};

export default connect(mapStateToProps)(App);

PrivateRoute.js 

import { authenticationService } from '../_services';

export const PrivateRoute = ({ component: Component, roles, ...rest }) => (
    <Route {...rest} render={props => {
        const currentUser = authenticationService.currentUserValue;
        if (!currentUser) {
            // not logged in so redirect to login page with the return url
            return <Redirect to={{ pathname: '/login', state: { from: props.location } }} />
        }

        // check if route is restricted by role
        if (roles && roles.indexOf(currentUser.role) === -1) {
            // role not authorised so redirect to home page
            return <Redirect to={{ pathname: '/'}} />
        }

        // authorised so return component
        return <Component {...props} />
    }} />
)

Ответы [ 2 ]

1 голос
/ 12 марта 2019

Provider, передает хранилище компоненту, вложенному в него, и, как правило, его необходимо применять только к корневому компоненту 

  <Provider store={store}>
    <Router history={history}>
      <div>              
        <div className="jumbotron">
          <div className="container">
            <div className="row">
              <div className="col-md-6 offset-md-3">
                <PrivateRoute exact path="/" component={App} />
                <Route path="/login" component={LoginPage} />
              </div>
            </div>
          </div>
        </div>
      </div>
    </Router>
  </Provider>
1 голос
/ 12 марта 2019

Вы должны обернуть свой корневой компонент Provider Компонентом высшего порядка, предоставляемым библиотекой react-redux, чтобы store был доступен везде.

См. Документацию о реакт-редуксе о Provider здесь .

...