@pcgbros/session-sdk-frontend

pbplus-session-sdk-frontend

安裝

npm 套件需求：

react ^16.5.2 react-dom ^16.5.2 react-redux ^5.0.7 react-router-dom ^4.3.1

使用 sessionStart (一)：準備 session config

使用 sessionStart function 傳入 (session start 時所需的設定)(App Component)，搭配 compose 可以把 HOC 過多層的寫法變得更簡略。

開始 session 程序，跟 session server 要一組 session id，並存入 cookie，程序完成後才會 render App component，若要關閉 session 程序直接 render App component，可以在 option 中設定屬性 { isDisableSessionProcess: true }。

import sessionStart from '@pcgbros/session-sdk-frontend';
import React, { Component } from 'react';
import { compose } from 'redux';
import { connect } from 'react-redux';
import { withRouter } from 'react-router-dom';

import RouteComponent from './RouteComponent.js';

class App extends Component{
  render() {
    return <RouteComponent />;
  }
}

const sessionConfig = {
  baseURL: process.env.PBPLUS_SESSION.BASE_URL,
  clientId: process.env.PBPLUS_SESSION.CLIENT_ID,
  defaultSessionId: process.env.PBPLUS_SESSION.DEFAULT_SESSION_ID,
};

function mapStateToProps(store) {
  const { app } = store;
  const { isLoading } = app;
  return {
    isLoading,
  };
}

export default compose(
  sessionStart(sessionConfig),
  withRouter,
  connect(mapStateToProps)
)(App);

sessionConfig: baseURL：必填，session server 網址。

clientId：必填，該網站的 session client id，為 session server 信任的 client id 才能開始 session 程序。

defaultSessionId：必填，預設 session id，表示還沒有開始 session start 程序過的 session id。

以上三個值由 config.json 設定：

"PBPLUS_SESSION": {
  "BASE_URL": "SESSION_SERVER_URL",
  "CLIENT_ID": "SOME_VALID_PBPLUS_CLINET_ID",
  "DEFAULT_SESSION_ID": "SOME_DEFAULT_SESSION_ID"
}

isDisableSessionProcess：選填，預設值為 false 若設定為 true，則不會進行任何 session 程序，直接 render

使用 sessionStart (二)： combineReducers

sessionStart 與 Redux 相依，需要藉由 combineReducers 儲存 sessionStart 的相關值。

在 combineReducers 中以 PBPLUS_SESSION_REDUCER 為 key，pbplusSessionReducer 為 value，加入 reducers 之中。

import { combineReducers } from 'redux';
import { PBPLUS_SESSION_REDUCER, pbplusSessionReducer } from '@pcgbros/session-sdk-frontend';

export default combineReducers({
  [PBPLUS_SESSION_REDUCER]: pbplusSessionReducer,
});

sidHttp

送出 header 中包含 encoded session id 的 request，為 axios create 的 instance。

會自動帶入的 header name: x-pb-sid

import { sidHttp } from '@pcgbros/session-sdk-frontend';

getSessionStatus

藉由 connect 中的 store 參數取得 session reducer 目前的值，有 isSessionStartDone sessionId 兩個屬性。

isSessionStartDone 表示向 session server 請求起始 session 成續的狀態 flag。 sessionId 為 encoded session id。

import React, { Component } from 'react';
import { connect } from 'react-redux';

import { getSessionStatus } from '@pcgbros/session-sdk-frontend';

class SomeComponent extends Component {
  render() {
    const { isSessionStartDone, sessionId } = this.props;

    return (
      <main>
        <h1>啟動 session 狀態： { isSessionStartDone ? 'Done' : 'starting'}</h1>
        <h1>Session Id: { sessionId }</h1>
      </main>
    );
  }
}

export default connect(store => {
  const sessionStatus = getSessionStatus(store);

  return {
    isSessionStartDone: sessionStatus.isSessionStartDone,
    sessionId: sessionStatus.sessionId
  };
})(SomeComponent);

getSessionId, deleteSession

把 connect 的 store 給 getSessionId(store)，取得 reducer 中的 encode session id。 dispatch(deleteSession())，刪除 cookie 的 session id，送出刪除 redis request，同時更新 reducer 中的 session id 值。

import React, { Component } from 'react';
import { getSessionId, deleteSession } from '@pcgbros/session-sdk-frontend';

class YourComponent extends Component {
  render() {
    const { isSessionStartDone, sessionId } = this.props;
    return (
      <main>
        <h1>Session Id: { sessionId }</h1>
        <p>
          <a href="#" onClick={() => { this.props.deleteSession(); }}>
            刪除 session
          </a>
        </p>
      </main>
    );
  }
}

export default connect(store => {
  const { pbplusSession } = store;
  const { isSessionStartDone } = pbplusSession;

  return {
    sessionId: getSessionId(store)
  };
}, dispatch => {
  return {
    deleteSession: () => {
      return dispatch(deleteSession());
    }
  };
})(YourComponent);

getSessionIdFromCookie

import { getSessionIdFromCookie } from '@pcgbros/session-sdk-frontend';

console.log(getSessionIdFromCookie())

取得現在 cookie 中的 encoded session id，這個 function 不會與 redux store 同步。