管理系統的登錄控制？手寫一個發佈訂閱模型！

最近做了一個後臺的項目，既然是後臺管理系統，登錄的控制自然是少不了的。

接到需求——後臺系統！花了幾乎半天搞出來了Webpack配置、搞出來了React Router、搞出來了 React 代碼基本的結構，下一步就是搞所謂的“登錄邏輯”了。

正好 React v16 大變，而自己最近又有些時候沒寫過React了，便不妨借這次機會熟悉一下React的新API吧！聽說React新出的 Context API 可以“取代Redux”，那這次登錄邏輯就用 Context 寫吧！

根組件裏的 React Context 來傳遞登錄狀態

雖然離開React有些時日了，但是它新的 Context API 看起來還是很“美味”的。於是，三兩下，一套 Context 就出現在了入口文件裏：

// 登錄之前的默認登錄信息
// 在可以看到我設計的“登錄信息”的數據結構和內容
const defaultLoginInfo = {
  username: '',
  token: false,
  ident: false, 
};

class Main extends React.Component {
  constructor(props) {
    super(props);
    // 寫登錄信息到 this.state
    // 通過 toStore 判斷是否也要寫 Storage
    this.updateLogin = (info, toStore = true) => {
      this.setState(prevState => {
        let nv = {...prevState.userLoginInfo, ...info};
        toStore && this.storeLoginInfo(nv);
        return {userLoginInfo: nv};
      });
    };

    // 從 sesionStorage 中取回登錄信息
    this.retrieveLoginInfo = () => {
      let stored = sessionStorage.getItem('userLoginInfo');
      // 這裏需要一個 try ... catch ...  ，但是爲了代碼易讀我給刪除了
      return stored ? JSON.parse(stored) : {};
    };
    
    // 將登錄信息存入 Storage
    this.storeLoginInfo = (val) => {
      sessionStorage.setItem('userLoginInfo', JSON.stringify(val));
    };

    this.state = {
      userLoginInfo: {
        ...defaultLoginInfo,
        update: this.updateLogin,   // 向子組件暴露方法
        // 在主組件初紿化時通過覆蓋默認登錄信息來生成實際用的登錄信息
        ...this.retrieveLoginInfo(),
        exit: () => this.updateLogin({...defaultLoginInfo}), // 向子組件暴露方法 - 退出登錄
      },
    };
  }

  render() {} // .....

  componentDidMount() {
    this.updateLogin(this.retrieveLoginInfo(), false);
  }
}

可以說是很簡陋了——這就是我用Context API 替代 Redux 的第一個作品。但它很簡明，也工作得很好——直到我想爲登錄部分加些新想法……

嘮叨幾句：（我眼中）管理系統的登錄功能要有的功能點

登錄狀態持久化。什麼用戶權限啊，身份啊，token啊，都要存到 Storage 裏面。
登錄狀態全局可訪問，包括在 React 組件以外。
Storage 丟失後有提示，引導用戶重新登錄。
引導重新登錄不可使用頁面跳轉，可以使用彈框。（想像一下：用戶填完了一大堆表單，可是程序檢測到登錄失效給跳轉了……）

從這幾點出發來看，原來的代碼在 React 組件之外，一無是處……

把邏輯提取出來

全局訪問

那就把代碼放到全局唄……

window 對象？（有這種想法的同學請面壁思過）

那麼如何避免使用全局變量又能解決數據存儲的問題呢？那就是是“沙盒模式”。沙盒模式，是JS非常普遍的一個設計模式，它通過閉包的原理將數據維持在一個函數作用於中，而通過返回值內的函數引用這個函數包體內的變量的方式，形成閉包，而只有通過該函數的返回函數才能訪問和修改該閉包內的數據，從而起來了數據保護的作用。

嗯，又是那個叫“閉包”的玩意。

但是，我們現在有了“模塊化”。當我們 import 一個模塊的時候，這個模塊的聲明會保持在一個獨立的作用域中，且一直存在。可以使用 exports 來實現“沙盒”的效果。除了導出的函數，其它對外界都不可見。（話說 Webpack 的模塊不也是用閉包來實現的嗎？）

處處同步（發佈訂閱）

分析一下：

哪裏需要發佈？

“退出登錄”按鈕
後端 API 告訴我“登錄信息不對”
前端主動發現登錄信息損壞

哪裏需要訂閱？

UI ，也就是根組件的 state

明顯，發佈訂閱是合適的。

代碼

// 登錄過期檢測
const checkExpireTime = info => {
  return Date.now() > info.expireTime && info.expireTime >= 0;
};

// 負責 Storage 操作：取回 + 存入
function retrieveLoginInfo() {
  let stored = sessionStorage.getItem('userLoginInfo');
  if(stored) {
    try {
      let info = { ...defaultLoginInfo, ...JSON.parse(stored) };
      if(checkExpireTime(info) || !info.token) {
        exitLogin();
        return {...defaultLoginInfo};
      }
      return {...defaultLoginInfo, ...info};
    } catch(e) {
      return {...defaultLoginInfo};
    }
  } else {
    exitLogin();
    return {...defaultLoginInfo};
  }
}
function storeLoginInfo(val) {
  return sessionStorage.setItem('userLoginInfo', JSON.stringify(val));
}

// 廣播
function broadcastLoginInfo(info) {
  broadcastList.forEach(curt => {
    curt(info);
  });
}
// 存放 Listener
let broadcastList = [];
function registerLoginInfoBroadcast(callback) {
  if(!broadcastList.includes(callback)) {
    broadcastList.push(callback);
  }
}

// 更新登錄信息 - 類似 Dispacher
function updateLoginInfo(info) {
  if(checkExpireTime(info)) {
    exitLogin();
    return [false, '登錄過期，請重新登錄'];
  } else {
    storeLoginInfo(info);
    broadcastLoginInfo(info);
    return [true];
  }
}

// 一些常用動作的提取（我們要拒絕樣本代碼）
function exitLogin() {
  updateLoginInfo({...defaultLoginInfo});
}
function syncLoginInfo() {
  broadcastLoginInfo(retrieveLoginInfo());
}

export default { 
  update: updateLoginInfo,
  retrieve: retrieveLoginInfo,
  exit: exitLogin,
  registerBroadcast: registerLoginInfoBroadcast,
  sync: syncLoginInfo,
  storeLoginInfo,
  retrieveLoginInfo,
  defaultLoginInfo,
};

如何使用它？

比如說，後臺檢測到 Token 錯誤，想強行清空登錄信息，要怎麼操作？

import loginInfo from '@/utils/path/to/loginInfoStorage.js';
// ...
function RequestApi (respData) {
    // Do some processing
    if([301, 302, 303].indexOf(respData.status.code) !== -1) {
        loginInfo.exit(); // 登錄出錯？要自行退出登錄！
    }
}

至於 React 根組件裏，情況就有些複雜了……

注入 React

在根組件裏：

要記得 Register Listener

// 放在 constructor 或者 componentDidMounted 裏都好 
    loginInfo.registerBroadcast(info => {
      this.updateLoginState(info, false);
    });

Listener 觸發時要更新根組件的 State

    this.updateLoginState = (info, toStore = true) => {
      this.setState(prevState => {
        let nv = {...prevState.userLoginInfo, ...info};
        toStore && this.storeLoginInfo(nv);
        let newState = {};
        if(!prevState.useLoginModal || nv.token) {
          newState.userLoginInfo = {...nv};
        }
        return newState;
      });
    };

隨 Context 傳給子組件的函數也不能忘

    this.state = {
      userLoginInfo: {
        ...this.retrieveLoginInfo(),
        update: this.updateLoginInfo,
        exit: () => {
            // 還有其它功能
            loginInfo.exit();
        },
      },
    };

爲了突出本質，以上只是我簡化後的代碼。完整的代碼（見下文）還有登錄彈框等功能。

注意

作爲訂閱者，Listener 裏不要再調用 update（發佈者）（令我想起了 componentDidUpdate）

順便一提：登錄彈框

本來不是本文討論範圍，但這裏也讓我頗費心思，實現得也不很好。此處不妨講講。

Storage 丟失後有提示，引導用戶重新登錄。引導重新登錄不可使用頁面跳轉，可以使用彈框。

一個棘手的問題是，框可以彈出來，但框背後的管理界面UI不能變。

我的思路是：state 裏的 loginInfo 分兩種——真實反映實際登錄狀態的 actualLoginInfo 和爲UI專供的 userLoginInfo。React router 和其它UI組件的 render 根據 userLoginInfo 來做判斷和渲染，登錄彈框則使用 actualLoginInfo。
下面就是我實際使用的代碼了。只是這個思路很不優雅。

注意的幾點：

useLoginModal - 使用登錄彈框還是路由跳轉到一整個登錄頁？
未登錄且useLoginModal 爲 true 時顯示登錄彈窗

class Main extends Component {
  constructor(props) {
    super(props);

    this.updateLoginState = (info, toStore = true) => {
      this.setState(prevState => {
        let nv = {...prevState.userLoginInfo, ...info};
        toStore && this.storeLoginInfo(nv);
        let newState = {
          actualLoginInfo: {...nv},
        };
        if(!prevState.useLoginModal || nv.token) {
          newState.userLoginInfo = {...nv};
          newState.useLoginModal = !!info.token; // 登錄後默認使用登錄彈窗
        }
        return newState;
      });
    };

    loginInfo.registerBroadcast(info => {
      // 顯示登錄彈窗就不修改登錄相關的UI狀態
      this.updateLoginState(info, false);
    });

    this.retrieveLoginInfo = loginInfo.retrieve;
    this.updateLoginInfo = loginInfo.update;
    
    // [NOTE] 需要在渲染<Route>之前讀入登錄狀態
    //        否則刷新之後URL會因爲Route未渲染而丟失
    this.state = {
      userLoginInfo: {
        ...this.retrieveLoginInfo(),
        // 升級登錄信息
        update: this.updateLoginInfo,
        // 在UI中使用此函數來退出登錄
        // config.useLoginModal
        //   - true  改寫登錄狀態、不修改登錄相關的UI狀態、顯示登錄彈窗
        //   - false 改寫登錄狀態、修改登錄相關的UI狀態、回到登錄頁面
        exit: (config = {}) => {
          if(config.useLoginModal || false) {
            this.setState({
              useLoginModal: true,
            }, () => {
              loginInfo.exit();
            });
          } else {
            this.setState({
              useLoginModal: false,
            }, () => {
              loginInfo.exit();
            });
          }
        },
      },
      useLoginModal: false,
      actualLoginInfo: {},
    };
    
  render() {
    return (
      <UserCtx.Provider value={this.state.userLoginInfo}>
        <UserCtx.Consumer>
        {info => (
          <main styleName="main-container">
            <HashRouter>
              <LocaleProvider locale={zh_CN}>
                <>
                  <Switch>
                    {(!info.token) && <Route path="/login" component={withRouterLogin} />}
                    {info.token    && <Route path="/admin" component={withRouterAdmin} />}
                    <Redirect to={info.token ? '/admin' : '/login'} />
                  </Switch>
                </>
              </LocaleProvider>
            </HashRouter>
            {/* 未登錄且useLoginModal時顯示登錄彈窗 */}
            <Modal
              title="請先登錄賬戶"
              visible={this.state.useLoginModal && !this.state.actualLoginInfo.token}
              footer={false}
              width={370}
              closable={false}
            >
              <LoginForm />
            </Modal>
          </main>
        )}
        </UserCtx.Consumer>
      </UserCtx.Provider>
    );
  }
    
｝

TODO

很多地方還有待完善：

每次都要去 Storage.get！可以加個緩存嗎？
可以封裝成一個類或者構造函數？這樣更加通用！
還沒寫取消 Listener 的功能……

總結

我這個前端小菜狗就是這樣在不知不覺中把登錄部分的代碼抽象出來了一套發佈訂閱模型。

管理系統的登錄控制？手寫一個發佈訂閱模型！

根組件裏的 React Context 來傳遞登錄狀態

嘮叨幾句：（我眼中）管理系統的登錄功能要有的功能點

把邏輯提取出來

全局訪問

處處同步（發佈訂閱）

代碼

如何使用它？

注入 React

順便一提：登錄彈框

TODO

總結

vue使用原生js實現滾動頁面跟蹤導航高亮

管理系統的登錄控制？手寫一個發佈訂閱模型！

Mac下配置sublime實現LaTeX

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結