這篇文章將為大家詳細講解有關(guān)如何在Vue中實現(xiàn)登錄成功后保存token,文章內(nèi)容質(zhì)量較高,因此小編分享給大家做個參考,希望大家閱讀完這篇文章后對相關(guān)知識有一定的了解。

在vue中,可以用**Storage(sessionStorage,localStorage)**來存儲token,也可以用vuex來存儲(但要考慮頁面刷新數(shù)據(jù)消失問題,可以在vuex用Storage),
下面介紹用localStorage來存儲:
在登錄請求成功后,會返回一個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);
})
網(wǎng)站題目:如何在Vue中實現(xiàn)登錄成功后保存token-創(chuàng)新互聯(lián)
當前路徑:http://www.chinadenli.net/article14/dsodde.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供App開發(fā)、微信公眾號、網(wǎng)站排名、微信小程序、移動網(wǎng)站建設(shè)、外貿(mào)網(wǎng)站建設(shè)
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請盡快告知,我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時需注明來源: 創(chuàng)新互聯(lián)
猜你還喜歡下面的內(nèi)容