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

創(chuàng)新互聯(lián)專注于平桂網(wǎng)站建設(shè)服務(wù)及定制，我們擁有豐富的企業(yè)做網(wǎng)站經(jīng)驗。 熱誠為您提供平桂營銷型網(wǎng)站建設(shè)，平桂網(wǎng)站制作、平桂網(wǎng)頁設(shè)計、平桂網(wǎng)站官網(wǎng)定制、微信小程序開發(fā)服務(wù)，打造平桂網(wǎng)絡(luò)公司原創(chuàng)品牌,更為您提供平桂網(wǎng)站排名全網(wǎng)營銷落地服務(wù)。

在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)