Question

我是React的新手，但在涉及全局事件和范围时，在“思考React”方面仍然遇到一些麻烦。

我的目标是维护有关“会话”的一些全局数据，例如用户是否已登录及其身份。

我的主容器如下：

import React, { Component } from "react";
import { Link, Route, Switch } from 'react-router-dom';

import Header from './Header';
import Routes from "./Routes";

class App extends Component {
    render() {
        return (
            <div className="parent-container">
                <Header />
                <Content />
            </div>
        )
    }
}

class Content extends Component {
    constructor(props) {
        super(props);
    }

    render() {
        return (
            <div className="content" >
                <Routes />
            </div>
        )
    }
}

export default App;

<Header />只是带有标题和链接的导航栏。

<Routes />是一个react-router，看起来像这样：

import React from "react";
import { BrowserRouter, Route } from 'react-router-dom';

import HomeView from "../presentational/_Views/HomeView";
import LoginView from "../presentational/_Views/LoginView";
import CreateUserView from "../presentational/_Views/CreateUserView";
import TestView from "../presentational/_Views/TestView";

const Routes = () => (
    <div>                
        <Route exact path="/" component={HomeView} />
        <Route path="/login" component={LoginView} />
        <Route path="/test" component={TestView} />
        <Route path="/create" component={CreateUserView} />
    </div>
)

export default Routes;

每条路线都会加载一个“表示性”视图组件，其中包含该特定视图的子组件（“登录”视图组件会导入LoginForm组件等）。

无论何时我的应用程序被硬加载（或重新加载），我都希望触发以下逻辑（伪代码）：

if session_token exists:
    - make a call to API
    - verify session
    - store a global session object containing session data

我认为我可以在componentWillMount()组件的App函数中执行类似的操作...

//...
class App extends Component {
    componentWillMount(){
        if(token && valid(token)){
            // store the user session in an object containing token, user-role, etc.
        }
    }

    render() {
//....

..但这似乎是一个不好的设计。

另一部分是：

根据用户是否已登录来显示/隐藏导航栏链接（如果未登录，则显示“登录”链接，如果已登录，则显示“注销”链接）
在呈现视图之前检查状态更改的身份验证。

以上两个是我想要了解背景信息的地方，但只关注这里的主要问题，只是为了解决问题。

这样的事情如何通过“反应方式”完成？

反应全局对象和事件

0 个答案: