管理系統的登入控制？手寫一個釋出訂閱模型！

小恐龍發表於2018-10-18
模型

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

接到需求——後臺系統！花了幾乎半天搞出來了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 的第一個作品。但它很簡明，也工作得很好——直到我想為登入部分加些新想法……

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

  1. 登入狀態持久化。什麼使用者許可權啊，身份啊，token啊，都要存到 Storage 裡面。
  2. 登入狀態全域性可訪問，包括在 React 元件以外。
  3. Storage 丟失後有提示，引導使用者重新登入。
  4. 引導重新登入不可使用頁面跳轉，可以使用彈框。（想像一下：使用者填完了一大堆表單，可是程式檢測到登入失效給跳轉了……）

從這幾點出發來看，原來的程式碼在 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。
下面就是我實際使用的程式碼了。只是這個思路很不優雅。

注意的幾點：

  1. useLoginModal – 使用登入彈框還是路由跳轉到一整個登入頁？
  2. 未登入且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 的功能……

總結

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

相關文章