Question

我正在尝试对我的应用实施JWT身份验证，她正面临问题，请作为Reactjs的初学者帮助我解决此问题。

成功登录后，我遇到以下错误：

未捕获的不变变量：在“ Connect（App）”的上下文或道具中找不到“ 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} />
    }} />
)

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

0 个答案: