vue、axios請求頭自定義

前言

由於業務性質緣由，以前的項目，其實沒有作帳號管理，默認登陸。
最近要求作帳號權限管理，因此須要在api請求中驗證token。

前端邏輯

• 登陸的時候後端返回一個token。
• 登錄成功，token寫入sessionStorage/localStorage。
• vuex存儲token。
• axios攔截請求，請求頭判斷token是否存在，若是存在，設置自定義字段config.headers.Token = token
• axios攔截響應，獲取HTTP狀態，若是狀態爲401，即未登陸/登錄過時，狀況本地相關token信息，跳轉到登陸頁。
• 其餘設置Content-Type、數據格式化
• 跨域相關設置withCredentials、crossDomain

後端邏輯

• 設置支持自定義字段token。
• Access-Control-Allow-Headers:x-requested-with,content-type,token
• 攔截OPTIONS請求，返回200。若是跨域，須要設置跨域容許，不然前端不能正確獲得OPTIONS結果。
• 對於GET/POST請求，檢測請求頭中的token字段，校驗結果決定是否走下一步流程。
• 若是校驗經過，走正常的業務邏輯。不然，設置HTTP狀態爲401，中斷業務流程，返回校驗結果。

問題

解決過程當中，容易出現如下問題：

• 前端攔截請求的時候，設置自定義字段，首字母大小寫。必須大寫。
• 後端處理OPTIONS請求的時候，不能正確設置容許跨域，致使前端不能正確獲得OPTIONS請求結果，GET/POST請求沒有發出。

結語

問題老是解決不完的，每解決完一個問題，都是一次收穫！
附上前端js代碼：

//設置post的默認格式爲form-data
//請求攔截：若是存在token，則把token帶在請求頭上發送出去
axios.defaults.withCredentials = true;
axios.defaults.crossDomain = true;
axios.interceptors.request.use((config) => {
    config.headers = {'Content-Type':'application/x-www-form-urlencoded'}
    let token = store.state.token;
    if (token) {
        config.headers.Token = token;
    }
    config.data = qs.stringify(config.data, {arrayFormat: 'brackets'});
    return config;
});
//響應攔截：若是htpp狀態401，則是須要登陸，清除token，跳轉到登陸頁
axios.interceptors.response.use(res =>{
    return res
}, error => {
    if(error.response && error.response.status === 401){
        store.commit('clearToken')
        router.replace({
            path: '/login',
        })
    }
    return Promise.reject(error.response ? error.response.data : error)
})