那些年踩過的 Vue 坑（1）

前言（此部分僅以記錄寫文章時的心情 2018-10-24）
之前作項目都是在其餘人搭好的架子中謝謝業務代碼，從未本身從 0 到 1 的完成過一個項目，今天有這樣一個機會，也是換了新工做的第一個任務，但沒有我想象中的那麼順利，最後仍是沒能獨立。

本身搭項目的過程

此次的任務是完成一個後臺管理系統，TL 說對技術選型沒有任何要求，因而就選擇了 Vue，由於以前實習的時候有參與過相似項目的開發，並且市面上有一個比較好的前端管理後臺集成解決方案（vue-element-admin），並且還有使用文檔，能夠直接修改後使用。
因而，
一、下載了基礎模版，剛下完的文件目錄結構以下：

二、開始修改配置文件，全局配置請求的域名

三、修改登陸模塊的請求 API 接口，即修改文件夾 api 下的 login.js 文件，此時請求不能發送成功，而後修改了 request.js 中的這段代碼：

四、把 headers 改爲了 後端定義的 SESSION_TOKEN，並註釋掉了下圖中的代碼：

五、根據問題一步一步查找，前後修改了 user.js、auth.js

最後項目的各類配置文件被改的坑愈來愈多，並且看起來很亂。。。

期間出現的問題

一、登陸請求發送成功，可是頁面沒有跳轉
二、模板中有獲取用戶信息的 GetInfo，可是當前項目不須要，改代碼的時候忽略了這一點

三、發送的請求未成功
四、token 不對

經排查發現的問題

一、後端定義的請求頭 header 裏面的 SESSION_TOKEN 字段名不符合規範

致使上述問題的主要緣由

一、當前項目不須要獲取用戶信息，忽略了 permission.js 裏面的路由攔截，如下是修改以後的

二、有些請求參數傳的不對（若是是 post 請求，參數可選時，須要傳遞一個空對象，不傳會被視爲 undefined，從而報錯）
三、請求須要帶 token，因爲以前刪改代碼，token 存取的方式有點亂，即用了模版代碼裏狀態管理裏面的 setToken 方法，又本身存了 localStorage
四、後端定義的請求頭 header 裏面的 key 不符合規範，應使用 '-' 而不是 '_'

別人是怎麼開始搭項目、解決問題的

1. 一樣，下載基礎模版；
2. 修改登陸模塊請求的接口；
3. 由於這個集成方案用到了 vuex 狀態管理，能夠直接使用寫好的方法獲取或者設置 token，不須要特意存在 localStorage 裏面；
4. 調試發現問題出現的點，當前項目沒有用到「獲取用戶信息（GetInfo）」，在 permission.js 和相關狀態管理文件中刪除此部分相關代碼，解決了登陸成功沒法跳轉頁面問題；
5. 調試發現問題出現的點，發現 SESSION_TOKEN 字段名不符合規範，經後端改成 Session-Token，解決了請求列表接口時返回「未登陸」的狀況；
6. 在 request.js 文件中，修改 攔截器 部分代碼，全局攔截請求未發送成功的狀況並給出相應提示，此處狀態碼需後臺提供；
7. 正常修改路由，增長新頁面；
8. 一些規範：公共請求寫在文件夾 api 下面，其餘頁面相關的，在相應頁面文件夾下建立 xx.service.js 文件

總結

1. 在用別人東西的時候，不要上來就改，更不要輕易刪代碼。先總體瞭解看明白，再考慮那些是須要改的，哪些是本身項目中不須要的
2. 遇到問題的時候必定要準確的定位出現問題的位置，才能更好的找到出現問題的緣由
3. Think more and then Do it!