摘要：接上篇議題合理的架構(gòu)討論上傳送門。處理思路如下使用上面定義的方法獲取如果能獲取到則說明有有效的，則時(shí)候即可跳轉(zhuǎn)到目標(biāo)頁(yè)如果獲取到空字符串，則說明無效或不存在，跳轉(zhuǎn)至登錄頁(yè)面。

接上篇《【Geek議題】合理的VueSPA架構(gòu)討論（上）》傳送門。

登錄狀態(tài)標(biāo)識(shí)符跟token類似，都是需要自動(dòng)維護(hù)有效期，但也有些許不同，獲取過程只在用戶登錄或注冊(cè)的時(shí)候，不需要自動(dòng)獲取。
本人比較推薦使用公共狀態(tài)管理vuex進(jìn)行自動(dòng)化管理，并配合路由鉤子，減少代碼編寫時(shí)的顧慮。

示例中公共狀態(tài)管理中的user模塊里定義了userIdObj，其中包含了userId登錄狀態(tài)標(biāo)識(shí)符和過期時(shí)間。
維護(hù)userId是否過期主要是通過vuex中的getter來實(shí)現(xiàn)。

const getters = {
  getUserId: (_state) => {
    // 獲取公共狀態(tài)中的userIdObj
    const userIdObj = {
      ..._state.userIdObj,
    };
    // 是否過期標(biāo)識(shí)
    let isExpire = false;
    // 判斷是否過期
    if (userIdObj && userIdObj.userId) {
      isExpire = new Date().getTime() - userIdObj.expireTime > -10000;
    }
    // 如果過期則返回空字符串（不一定）
    if (!userIdObj || !userIdObj.userId || isExpire) {
      return "";
    }
    // 沒過期則返回userId
    return userIdObj.userId;
  },
};

回顧上篇中全局的路由鉤子router.beforeEach，當(dāng)目標(biāo)路由元信息requiresAuth為true則表示，這個(gè)路由必須有登錄狀態(tài)才能訪問，這時(shí)候就會(huì)進(jìn)行登錄狀態(tài)檢查。處理思路如下：

使用上面定義的getter方法獲取userId；

如果能獲取到則說明有有效的userId，則時(shí)候即可跳轉(zhuǎn)到目標(biāo)頁(yè)；

如果獲取到空字符串，則說明userId無效或userId不存在，跳轉(zhuǎn)至登錄頁(yè)面。

【PS】示例這里的處理還不完美，最好跳轉(zhuǎn)登錄前保存好目標(biāo)路由，登錄成功就直接跳轉(zhuǎn)去該路由。

router.beforeEach((to, from, next) => {
  // ...
  // 檢查登錄狀態(tài)
  if (to.meta.requiresAuth) {
    console.log("目標(biāo)路由需要登錄狀態(tài)");
    if (!store.getters.getUserId) {
      console.log("內(nèi)存無登錄信息，嘗試在本地存儲(chǔ)中找");
      const localUserIdObj = JSON.parse(localStorage.getItem("userIdObj"));
      if (localUserIdObj) {
        // 如果本地存儲(chǔ)中有userIdObj，則提交到公共狀態(tài)
        store.commit("setUserIdObj", localUserIdObj);
      }
    }
    // 再次檢查公共狀態(tài)里有沒有userId
    if (!store.getters.getUserId) {
      console.log("依舊無登錄信息");
      router.push({
        name: "userLogin",
      });
    }
  }
  next();
});

在“頁(yè)面”中獲取userId也很簡(jiǎn)單，使用計(jì)算屬性是最好的，返回的userId具有響應(yīng)性，這做的好處也是為了實(shí)時(shí)將登錄狀態(tài)反應(yīng)到頁(yè)面上，才不會(huì)出現(xiàn)顯示已登錄，但用戶刷新一下才能知道登錄狀態(tài)已過期的尷尬情況。

【PS】一些需要用戶登錄狀態(tài)的api函數(shù)，也是通過這樣的方法獲取并使用。當(dāng)然，建議在非首屏加載使用的api函數(shù)（比如提交表單），需要在調(diào)用前，檢查一下userId還存不存在，以免出錯(cuò)。

computed: {
  // 獲取登錄狀態(tài)
  userId() {
    return this.$store.getters.getUserId;
  },
},

有時(shí)會(huì)有需要取消請(qǐng)求的需求，比如上傳文件耗時(shí)過長(zhǎng)，用戶不想等，這時(shí)候就必須有取消的功能。
上篇提到的axios已經(jīng)提供了一個(gè)基于CancelToken的取消機(jī)制，這里我們要配合vuex實(shí)現(xiàn)對(duì)全局連接的實(shí)時(shí)監(jiān)控。

【PS】示例的接口名稱都是在寫api函數(shù)的時(shí)候定義好的，想要更加靈活，可以每次請(qǐng)求都多帶帶指定名字。

示例中給公共狀態(tài)下的com模塊添加了cancelToken數(shù)組，用來保存發(fā)起的連接的名稱和source（取消標(biāo)記），并提供了如下三個(gè)mutations方法

// 增加cancelToken
addCancelToken(_state, cancelToken) {
  _state.cancelToken.push(cancelToken);
  const arr = _state.cancelToken;
  _state.cancelToken = arr;
},
// 刪除指定名字的cancelToken
deleteCancelToken(_state, name) {
  _state.cancelToken.some((i, index) => {
    if (i.name === name) {
      _state.cancelToken.splice(index, 1);
      return true;
    }
    return false;
  });
},
// 清空cancelToken
clearCancelToken(_state) {
  _state.cancelToken.forEach((i) => {
    if (i.source && typeof i.source.cancel === "function") {
      i.source.cancel(`cancel${name}`);
    }
  });
  _state.cancelToken = [];
},

基本思路：

在“請(qǐng)求發(fā)起前攔截器”中獲取到source（取消標(biāo)記），寫入請(qǐng)求配置，并提交名稱和source到公共狀態(tài)管理；

這時(shí)候通過查詢公共狀態(tài)中是否有這個(gè)名字的連接就可以獲取到source進(jìn)行取消；

在“響應(yīng)攔截器”中我們將已經(jīng)成功的請(qǐng)求在公共狀態(tài)管理中移除。

// 請(qǐng)求發(fā)起前攔截器
myAxios.interceptors.request.use((_config) => {
  const config = _config;
  const source = axios.CancelToken.source();
  // 獲取cancelToken
  config.cancelToken = source.token;

  // 取消請(qǐng)求標(biāo)記保存
  store.commit("addCancelToken", {
    name: config.name,
    source,
  });

  return config;
}, () => {
  // 異常處理
  console.error("請(qǐng)求發(fā)起前攔截器異常");
});

// 響應(yīng)攔截器
myAxios.interceptors.response.use((response) => {
  // 刪除取消標(biāo)記
  store.commit("deleteCancelToken", response.config.name);

  console.log(response);
  return response;
}, (error) => {
  console.error(error);
  // 清理取消標(biāo)記
  store.commit("clearCancelToken");
  return Promise.reject(error);
});

使用計(jì)算屬性獲取cancelToken數(shù)組，這里是響應(yīng)式的，所有我們其實(shí)可以知道現(xiàn)在有多少個(gè)請(qǐng)求還未完成了。

【PS】實(shí)時(shí)對(duì)全局請(qǐng)求的監(jiān)控已經(jīng)實(shí)現(xiàn)，其實(shí)可以做的擴(kuò)展就很多了，比如可以全局化loading的顯示，只要數(shù)組內(nèi)一直不為空持續(xù)一段時(shí)間就可以判斷需要顯示loading，如果為空則關(guān)閉loading。

computed: {
  // 獲取連接列表
  cancelToken() {
    return this.$store.state.com.cancelToken;
  },
},

遍歷這個(gè)數(shù)組，查找到對(duì)應(yīng)名字的連接就可以取消了。

this.cancelToken.forEach((i) => {
  console.log(i);
  if (i.name === "上傳文件" && typeof i.source.cancel === "function") {
    console.log("取消上傳");
    i.source.cancel(`cancel${name}`);
  }
});

在初始化Vue的根組件前，給Vue的原型鏈上添加常用的工具，可以方便在vue文件中使用。這樣做會(huì)影響所有Vue示例推薦只在單頁(yè)面應(yīng)用中使用。
比如下面以我們的api集為例，這樣在vue文件中this.$api就可以使用我們的api集，不需要重復(fù)引用。

// 將api模塊掛載進(jìn)vue方便在this調(diào)用
Vue.prototype.$api = api;

在util文件夾下可以新建一個(gè)專門用來存過濾器的filter.js，然后批量導(dǎo)入的全局過濾器中。

import * as filters from "./util/filter";
Object.keys(filters).forEach(k => Vue.filter(k, filters[k]));