Question

我正在努力确定在我的React / React-Router / Redux / MERN-stack应用程序中处理身份验证的最佳方法，我们将为您提供帮助。特别是，我没有很好地将各种库编织在一起，结果是我正在检查各个组件级别的用户是否登录，而我认为应该在App.js。

我的应用程序使用password.js进行身份验证，而我的mongodb具有users集合，该集合可跟踪每个用户的信息。 users集合中的文档如下所示：

我的应用程序有一个还原操作userActions，该操作使用authorizedReducer将userInfo, authorized, loading中的一个或多个对象添加到reduxState。 loading仅根据操作是否完成而返回TRUE / FALSE，authorized返回有关是否已登录的TRUE / FALSE布尔值，如果已授权== TRUE ，则userInfo从其mongodb文档中返回用户的信息（否则不返回userInfo）。

说了这么多，他就是我的App.js和index.js文件当前的结构形式：

App.js

import React, { Component } from 'react';
import { connect } from 'react-redux';
import { Route, Switch } from 'react-router-dom';

import AppNavbar from './components//Navbars/AppNavbar';
import LoginModal from './components/LoginModal';
import SignupModal from './components/SignupModal';
import HomePage from './path-to-component';
import AboutUs from './path-to-component';
import HelpPage from './path-to-component';
import NoMatch from './path-to-nomatch';
... import of ~15 other routes ...

// Want to use this redux userAction to get info on the user (if he's logged in, other acct info, etc.)
import { userActions } from '../../../actions/auth/auth-actions.js'; 

class App extends Component {
    constructor(props, context) {
        super(props, context);
        this.handleShowLogin = this.handleShowLogin.bind(this);
        this.handleCloseLogin = this.handleCloseLogin.bind(this);
        this.handleShowSignup = this.handleShowSignup.bind(this);
        this.handleCloseSignup = this.handleCloseSignup.bind(this);

        this.state = {
            showLogin: false,
            showSignup: false
        };
    }

    // dont worry about these - just used for displaying login / signup modals
    handleCloseLogin() { this.setState({ showLogin: false }); }
    handleShowLogin() { this.setState({ showLogin: true }); }
    handleCloseSignup() { this.setState({ showSignup: false }); }
    handleShowSignup() { this.setState({ showSignup: true }); }

    // want to be able to do 1-time grab of user actions, storing the user's info in reduxstate    
    componentDidMount() {
        this.props.dispatch(userActions.authorize());
    }

    render() {
        return (
            <React.Fragment>
                <AppNavbar login={this.handleShowLogin} signup={this.handleShowSignup} />
                <LoginModal close={this.handleCloseLogin} showLogin={this.state.showLogin} signup={this.handleShowSignup} />
                <SignupModal close={this.handleCloseSignup} showSignup={this.state.showSignup} />
                <Switch>
                    <Route exact path='/' render={(props) => <HomePage {...props} />} />
                    <Route exact path='/about' render={(props) => <AboutUs {...props} />} />
                    <Route exact path='/site-guide' render={(props) => <HelpPage />} />
                    ... ~15 more routes ...
                    <Route component={NoMatch} />
                </Switch>
                <AppFooter />
                <TableHeaderTooltip/>
            </React.Fragment>
        );
    }
}

// want to have this here to grab userInfo & authorized, but this doesnt work in App.js
function mapStateToProps(reduxState) {
    return {
        userInfo: reduxState.authorizedReducer.userInfo,
        authorized: reduxState.authorizedReducer.authorized,
        loading: reduxState.authorizedReducer.loading
     };
}

export default connect(mapStateToProps)(App);

Index.js

import store from './store';
... other imports ...

ReactDOM.render(
    <Provider store={store}>
        <BrowserRouter>
            <App />
        </BrowserRouter>
    </Provider>,
    document.getElementById('root'));

简而言之，上面的App.js不能按预期工作。 userInfo和authorized不起作用，我想知道是否无法在App.js文件中完成redux数据获取。

总之，能够在主App.js文件中获取身份验证信息（是否已登录用户，如果已登录，则用户信息是什么）将非常有用。我想将authorizedReducer.authorized布尔值和userInfo对象作为道具传递给路线。相反，当前我正在调用userActions（）来获取userInfo / auth信息，但是在需要此信息的每个组件中都调用了此信息（例如，HomePage和About，但是我的许多应用路由也被排除在上面（... ）需要userInfo和授权信息）。

这可能吗？我是沿着正确的轨道前进，还是应该朝其他方向走？对此的任何帮助都非常感谢！

编辑：（如果这样做有帮助）-这就是我的reduxState的样子。有关auth的reducers。我有一个authentication减速器，它检查登录，然后还有authorizedReducer减速器，它也检查登录，并且还有userInfo。

EDIT2 ：为了澄清，authentication减速器在用户登录时自动填充TRUE，这很好。但是，userInfo中的authorized和authorizedReducer仅在分派userActions()操作时填充。

将Redux（获取用户信息）与React-Router（私有路由+将用户信息作为对路由的支持）结合起来

0 个答案: