鍍金池/ 問答/網(wǎng)絡(luò)營銷  HTML/ react項目,用戶進入某一個界面需要判斷用戶信息是否存在,如果不存在,就請求

react項目,用戶進入某一個界面需要判斷用戶信息是否存在,如果不存在,就請求

問題描述

1、用戶不管從什么界面進入,都需要獲取用戶信息和微信分享的功能
2、如果用戶已經(jīng)獲取某一個信息,將不再調(diào)到該信息的請求接口

問題出現(xiàn)的環(huán)境背景及自己嘗試過哪些方法

react項目,微信公眾號

相關(guān)代碼

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);

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

你期待的結(jié)果是什么?實際看到的錯誤信息又是什么?

目前我是將獲取用戶信息和微信分享的配置都寫在首頁,但是發(fā)現(xiàn)當(dāng)用戶從地址欄輸入其他地址(或在其他路由界面中進行刷新),比如http://xx.com/a這個路由進入(刷新)的時候,獲取不到用戶信息和微信的配置信息
我想不管用戶從哪個界面進入或者刷新,都能獲取到用戶的信息和微信的配置信息

【問題】:
1、將home.js中componentDidMount的js寫在哪才能規(guī)避這個問題?有沒有其他的解決辦法?
2、目前我是將home.js中的componentDidMount的js寫在了router/index.js中,這種方法在公司正式項目中常見嗎?

剛接觸React不久,還請大神們給點思路,謝謝了

回答
編輯回答
萌面人

單獨寫一個身份驗證的組件,任何地址都會路由到這個組件,這個組件的componentDidMount中進行身份驗證,但是組件不會渲染任何視圖

render () {
       return null
   }

路由就應(yīng)該這樣寫

<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/>是身份驗證的組件

2017年6月30日 15:50
編輯回答
淡墨

是不是可以考慮下cookie呢?
具體得操作是這樣的。在react得層級比較靠前得組件中路由組件之前加一個用戶信息驗證。
將用戶信息放到cookie里,cookie存在的話就用這個cookie不存在得話就返回到登陸界面,登陸后得用戶信息繼續(xù)放到cookie中。如果用戶隔了很久再刷新,那么這時候退出到登陸界面出于安全方面考慮也是很合理得

2017年10月3日 12:12