react项目，用户进入某一个界面需要判断用户信息是否存在，如果不存在，就请求

Question

问题描述

1、用户不管从什么界面进入，都需要获取用户信息和微信分享的功能
2、如果用户已经获取某一个信息，将不再调到该信息的请求接口

问题出现的环境背景及自己尝试过哪些方法

react项目，微信公众号

相关代码

index.js入口文件

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

router/index.js

export const routes = [{
    path: '/x',
    component: () => import('../xx')
}, {
    path: '/xx',
    component: () => import('../xx')
}, 
...
]
const router = (props) => (
    <BrowserRouter>
        <Switch>
            <Route exact path="/" render={() => <Redirect to="/invite" />} />
            {routes.map(({ path, title, component }, index) => (
                <Route
                    key={index}
                    exact
                    path={path}
                    onEnter={() => { document.title = title }}
                    component={AsyncComponent(component)}
                />
            ))}
        </Switch>
    </BrowserRouter>
)

Home.js 首页

componentDidMount() {
    const { dispatch } = this.props
    get(url).then(data => {
      if (!data) {
        window.location.href = 'xxx'
      } else {
        dispatch({
          type: xxx,
          openid: xxx
          avatar: xxx,
          name: xxx
        })

        post(url, params).then(data => {
          if(!data){
            this.props.history.push('/');
            return false;
          }
          
          window.wx.config({
            debug: true, 
            appId: data.appId, 
            timestamp: data.timestamp, 
            nonceStr: data.nonceStr,
            signature: data.signature,
            jsApiList: data.jsApiList
          });

          window.wx.ready(function () {
            // 分享至朋友圈
            window.wx.onMenuShareTimeline(shareData);

          });
          ...
        })
      }
    })
  }

你期待的结果是什么？实际看到的错误信息又是什么？

目前我是将获取用户信息和微信分享的配置都写在首页，但是发现当用户从地址栏输入其他地址（或在其他路由界面中进行刷新），比如http://xx.com/a这个路由进入（刷新）的时候，获取不到用户信息和微信的配置信息
我想不管用户从哪个界面进入或者刷新，都能获取到用户的信息和微信的配置信息

【问题】：
1、将home.js中componentDidMount的js写在哪才能规避这个问题？有没有其他的解决办法？
2、目前我是将home.js中的componentDidMount的js写在了router/index.js中，这种方法在公司正式项目中常见吗？

刚接触React不久，还请大神们给点思路，谢谢了

Answer 1

单独写一个身份验证的组件，任何地址都会路由到这个组件，这个组件的componentDidMount中进行身份验证，但是组件不会渲染任何视图

render () {
       return null
   }

路由就应该这样写

<BrowserRouter>
        <AuthRoute/>
        <Switch>
            <Route exact path="/" render={() => <Redirect to="/invite" />} />
            {routes.map(({ path, title, component }, index) => (
                <Route
                    key={index}
                    exact
                    path={path}
                    onEnter={() => { document.title = title }}
                    component={AsyncComponent(component)}
                />
            ))}
        </Switch>
    </BrowserRouter>

<AuthRoute/>是身份验证的组件

Answer 2

是不是可以考虑下cookie呢？
具体得操作是这样的。在react得层级比较靠前得组件中路由组件之前加一个用户信息验证。
将用户信息放到cookie里，cookie存在的话就用这个cookie不存在得话就返回到登陆界面，登陆后得用户信息继续放到cookie中。如果用户隔了很久再刷新，那么这时候退出到登陆界面出于安全方面考虑也是很合理得