vue前端開發中登錄相關業務邏輯總結

登錄標誌爲token

1、登錄token來源
a、外面參數傳遞進來，多系統聯動做免登錄
要注意：當從鏈接上獲取這個參數時，在已登錄的情況下是否需要每次都重置
要注意：鏈接上的token參數過多，有多個，vue中token對應一個數組，取數組最後一個元素

b、微信公衆號 靜默登錄通過openid獲取token登錄
微信小程序手機號登錄 手機號換token
手機號+驗證碼 登錄

2、退出登錄，清空登錄狀態
注意：openid和手機號解綁 ，方便公衆號h5在同一個微信裏要登錄不同的用戶

3、哪些頁面需要登錄才能查看， 哪些頁面不登錄可查看
注意：進入中間頁面 未登錄如何處理
a、跳轉登錄後，再返回； b、回到首頁(或不需要登錄的頁面)

4、http請求返回 登錄狀態過期，如何處理
清空緩存狀態，過期跳轉去登錄 登錄後再繼續原來的操作頁面

5、登錄狀態一般在路由攔截裏進行校驗，登錄信息要全局存儲，作爲全局狀態，要保證緩存與內存裏的狀態一直。

全局存儲登錄狀態 參考代碼

 import { OpenIdCache, TokenCache } from '../utils/cacheOpt';
let _token = '';
let _openId = '';
const store = {
  user: {},
  isLogin () {
    const { openId, token } = this.getLoginFlat();
    return Boolean(openId && token);
  },
  /**
   * 獲得登錄憑證
   * @returns
   */
  getLoginFlat () {
    if (!_token) {
      _token = TokenCache.getValue();
    }

    if (!_openId) {
      _openId = OpenIdCache.getValue();
    }

    return { token: _token, openId: _openId };
  }
};

const Muations = {

  /**
   * 設置登錄憑證
   * @param {*} param0
   */
  setLoginFlat ({ token, openId }) {
    _token = token;
    _openId = openId;
    OpenIdCache.setValue(openId);
    TokenCache.setValue(token);
   
  }
};

export { Muations };
export default store;