在 reactjs 中实现身份验证时面临的问题

Question

我正在尝试对我的应用程序实施 JWT 身份验证，她遇到了问题，请作为 reactjs 的初学者帮助我解决这个问题。

登录成功后出现以下错误：

未捕获的不变违规：在“Connect(App)”的上下文或道具中找不到“商店”。要么将根组件包装在 a 中，要么将“store”作为道具显式传递给“Connect(App)”。

主 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 }; 

布局 App.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} />
    }} />
)

Answer 1

您必须使用react-redux 库提供的Provider 高阶组件包装您的根组件，以使store 可以在任何地方访问。

请参阅有关 Provider here 的 react-redux 文档。

Answer 2

Provider，passes the store嵌套在里面的组件，一般只需要应用到根组件上

  <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>