我正在尝试对我的应用实施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} />
}} />
)