bug狀況:每次登錄之後,後臺都是無token無權限狀態的.需要手動刷新重新載入纔能有token
出現這種問題先考慮是不是token是空的,多觀察讀寫token的地方可以更快找到bug所在
1.檢查store設置
store目錄下的js文件,需要有以下幾個變量:
export default new Vuex.Store({
state:{token:''},
mutitions:{
updateToken(state,token){
state.token = token
}},
action:{}
)
this.$store.commit('updateToken','後端返回的token');//store已經做全局處理
修改state內數據必須要用通過comit函數提交到mutations內的函數進行修改
其中要注意的是,action是異步的,mutations是同步的
實際可以直接通過this.state.token='後端返回的token’修改,但是嚴格模式下不允許的,會報錯,在debug情況下需要儘量把所有有可能出錯的地方改完美.而且用mutations是可以進行回滾之類的操作,但我暫時沒用到類似的功能
2.檢查token存放的位置
因爲我寫的是後臺管理界面,爲了方便直接存在了localStorage裏面了,如果是用戶使用的前端,建議放在sessionStorage中,有時間限制,關掉瀏覽器重新開需要重新登錄,更加安全
在登錄界面的vue中post的api中,成功後需要對返回的用戶信息和token進行處理,順便調試輸出一下token是否null
window.localStorage.setItem('token', resp.token);
console.log(resp.token);
3.檢查axios的header是否設置了默認的token
如果是通過header存放token的話,在axios文件中尋找 axios.create 字段,看看自己的headers是不是設置了默認的token值,在這裏可以把它刪掉,然後後面獲取到token之後再通過自己寫的updateToken函數來添加到header中,logout同理.
export const updateHeader = (key,params) =>{
http.defaults.headers.common[key] = params;
}
this.updateHeader('Authorization', '後端獲取的token');//登錄時候
this.updateHeader('Authorization', null);//登出時候
在登錄成功的執行語句塊中更新token,在登出時候把其設置爲null進行刪除
4.檢查post的格式
如果token是放在cookie或者session或者json的話,可以F12或者fiddler抓包一下看看包中是否有token再針對性進行debug
基本上面四步走完以後,應該可以了,如果還是有毛病可以留言問問呢