Question

我已经使用passport.js在我的React App中建立了授权，我想在我的App.js文件中获取我的授权路由，以查看用户是否已登录到该应用程序，或者是否没有人登录

为解决这个问题，我共享了我的React App的App.js文件和Index.js文件的压缩版本。

// App.js File

// Import React Libraries, Routes, Container Pages
import React, { Component } from 'react';
import { connect } from 'react-redux';
import { Route } from 'react-router-dom';
import { userActions } from './actions/auth/auth-actions.js';
import GameLanding from './containers/StatsPages/Game/GameLanding';
import AppFooter from './components/AppFooter';

// And Create The App
class App extends Component {
    constructor(props, context) {
        super(props, context);
    }

    componentDidMount() {
        this.props.dispatch(userActions.authorize());
    }

    render() {
        return (
            <div>    
                <Route exact path='/stats/games' render={() => <GameLanding userInfo={this.props.userInfo} />} />
                <AppFooter />
            </div>
        );
    }
}

// export default App;
function mapStateToProps(reduxState) {
    return {
        userInfo: reduxState.authorizedReducer.userInfo,
        authorized: reduxState.authorizedReducer.authorized,
        loading: reduxState.authorizedReducer.loading
    };
}

export default connect(mapStateToProps)(App);

...我的整个App.js文件都有〜15个Routes组件，我对App.js文件的目标（部分）是获取authorized和userInfo道具，并通过这些到各个路径中的组件。我展示了一个将userInfo属性传递给GameLanding组件的示例。

这是我设置Index.js文件的方式。

// Index.js

// Import Libraries
import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import { BrowserRouter } from 'react-router-dom';

// Import CSS and the App
import App from './App';
import 'react-table/react-table.css';
import './index.css';
import './App.css';

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

我当前的问题是这样的：由于某种原因，获取userInfo和authorized道具正在破坏我的应用程序。不幸的是，我没有收到任何错误消息...相反，我的应用程序中的所有react-router-dom链接都无法正常工作...单击它们会更改url，但我的应用程序的页面不再更改... < / p>

然后我的问题是（a）是否允许我以我的方式（使用connect，mapStateToProps等）在App.js中获取授权数据，还是我做错了所有这些？ >

是否有人登录到我的应用程序是整个应用程序范围内的事情，而不是特定于页面的事情，因此，我想到了该应用程序（也是为了避免必须在许多容器页面中获取身份验证道具）。 js是抓住这些道具的最佳场所。

任何关于我的应用程序为什么损坏或我的App.js文件应如何显示的想法（我确信99％的index.js都可以），将不胜感激！谢谢！

编辑：作为参考，请执行以下操作：（i）导入userActions，（ii）在componentDidMount中调用userActions.authorize（），（iii）包括mapStateToProps并在应用程序底部连接，等用于将auth道具加载到我的任何容器组件中。例如如果我在GameLanding组件中有此代码，则不会像在App.js中使用此代码时那样破坏应用程序范围内的react-router-dom链接。因此是问题的标题。谢谢！

Answer 1

1）应用中断的原因：

我假设userInfo和授权道具将是未定义的，因为组件最初在componentDidMount运行之前呈现，并且您尚未处理未定义的道具。您还可以为这些道具传递默认道具。

2）更好的授权结构 我假设您需要验证每条路由以进行授权。

i）创建路线文件并输入您应用的所有路线。

ii）<Route exact path='/stats/games' component={GameLanding} onEnter={reqAuth}/>

在reqAuth函数内部，您应该检查用户是否已获得该路由的授权。

iii）内部App组件调用操作，用于获取数据，存储在商店中并将GameLanding用作子组件，并仅在定义道具时传递道具。

那不是完整的代码，但是应该给你要点。

快乐编码！

React App是否允许在App.js文件中获取数据？

1 个答案: