1. 年前項(xiàng)目趨于穩(wěn)定誊辉,想著把Vue構(gòu)建的后臺(tái)管理項(xiàng)目重構(gòu)一下型奥,主要是因?yàn)槔享?xiàng)目是Vue和jquery混用误窖,然后隨著不停地增加功能,代碼也變得越來(lái)越臃腫和不好維護(hù)猜绣,趁著這段時(shí)間抓緊重構(gòu)一下灰殴,也是對(duì)自己的一次梳理和提升。
2. 就先從登錄開(kāi)始吧掰邢,現(xiàn)在我們項(xiàng)目登陸的流程是把用戶名牺陶,密碼,驗(yàn)證碼通過(guò)登錄接口發(fā)送給后端后辣之,后端會(huì)返回一個(gè)字段里面包含token掰伸,通過(guò)登陸后,以后每次請(qǐng)求都要把這個(gè)token放到請(qǐng)求頭header里面召烂,如果沒(méi)有則返回錯(cuò)誤信息碱工。
3. 發(fā)起請(qǐng)求的庫(kù)用的axios,然后還用到了element-ui, 在src目錄下面新建一個(gè)request.js, 因?yàn)榈卿浗涌诓恍枰觮oken,然后axios可以在請(qǐng)求前和請(qǐng)求后做一些操作怕篷,如:
4. 我是把登錄成功后的token信息放到了vuex里面历筝,然后在vuex里面把token加到了sessionStorage里面,因?yàn)槿绻诺絭uex里面的話廊谓,刷新之后登陸成功后的信息就不保存了梳猪,所以放到了sessionStorage里面。
5. 我們應(yīng)該全局使用這個(gè)axios所以在main.js中引入它:
6. 項(xiàng)目部分參考: vue-admin 這個(gè)項(xiàng)目蒸痹,文檔:vue-element-admin?春弥, github地址:GitHub - PanJiaChen/vue-element-admin: A magical vue admin http://panjiachen.github.io/vue-element-admin,非常感謝作者叠荠,學(xué)到很多D渑妗!榛鼎!