這篇文章將為大家詳細(xì)講解有關(guān)如何在Vue中實(shí)現(xiàn)登錄成功后保存token,文章內(nèi)容質(zhì)量較高,因此小編分享給大家做個(gè)參考,希望大家閱讀完這篇文章后對相關(guān)知識(shí)有一定的了解。
創(chuàng)新互聯(lián)專注于平桂網(wǎng)站建設(shè)服務(wù)及定制,我們擁有豐富的企業(yè)做網(wǎng)站經(jīng)驗(yàn)。 熱誠為您提供平桂營銷型網(wǎng)站建設(shè),平桂網(wǎng)站制作、平桂網(wǎng)頁設(shè)計(jì)、平桂網(wǎng)站官網(wǎng)定制、微信小程序開發(fā)服務(wù),打造平桂網(wǎng)絡(luò)公司原創(chuàng)品牌,更為您提供平桂網(wǎng)站排名全網(wǎng)營銷落地服務(wù)。在vue中,可以用**Storage(sessionStorage,localStorage)**來存儲(chǔ)token,也可以用vuex來存儲(chǔ)(但要考慮頁面刷新數(shù)據(jù)消失問題,可以在vuex用Storage),
下面介紹用localStorage來存儲(chǔ):
在登錄請求成功后,會(huì)返回一個(gè)token值,用loaclStorage保存
localStorage.setItem('token',res.data.token)
在main.js中設(shè)置全局請求頭和響應(yīng)回來的判斷
//設(shè)置axios請求頭加入token Axios.interceptors.request.use(config => { if (config.push === '/') { } else { if (localStorage.getItem('token')) { //在請求頭加入token,名字要和后端接收請求頭的token名字一樣 config.headers.token=localStorage.getItem('token'); } } return config; }, error => { return Promise.reject(error); }); //============================= //響應(yīng)回來token是否過期 Axios.interceptors.response.use(response => { console.log('響應(yīng)回來:'+response.data.code) //和后端token失效返回碼約定403 if (response.data.code == 403) { // 引用elementui message提示框 ElementUI.Message({ message: '身份已失效', type: 'err' }); //清除token localStorage.removeItem('token '); //跳轉(zhuǎn) router.push({name: 'login'}); } else { return response } }, error => { return Promise.reject(error); })