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

創新互聯專注于平桂網站建設服務及定制，我們擁有豐富的企業做網站經驗。 熱誠為您提供平桂營銷型網站建設，平桂網站制作、平桂網頁設計、平桂網站官網定制、微信小程序開發服務，打造平桂網絡公司原創品牌,更為您提供平桂網站排名全網營銷落地服務。

在vue中，可以用**Storage（sessionStorage，localStorage）**來存儲token，也可以用vuex來存儲（但要考慮頁面刷新數據消失問題，可以在vuex用Storage），

下面介紹用localStorage來存儲：

在登錄請求成功后，會返回一個token值，用loaclStorage保存

localStorage.setItem('token',res.data.token)

在main.js中設置全局請求頭和響應回來的判斷

//設置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);
 });

//=============================
//響應回來token是否過期
Axios.interceptors.response.use(response => { 
  console.log('響應回來：'+response.data.code) 
  //和后端token失效返回碼約定403 
  if (response.data.code == 403) {
    // 引用elementui message提示框  
    ElementUI.Message({  
     message: '身份已失效', 
     type: 'err'  
     });
    //清除token 
    localStorage.removeItem('token ');
    //跳轉  
    router.push({name: 'login'}); 
   } else { 
     return response 
   } 
  }, 
 error => { 
  return Promise.reject(error); 
  })

網站題目：如何在Vue中實現登錄成功后保存token-創新互聯
當前路徑：http://vcdvsql.cn/article14/dsodde.html

成都網站建設公司_創新互聯，為您提供App開發、微信公眾號、網站排名、微信小程序、移動網站建設、外貿網站建設

廣告

聲明：本網站發布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創新互聯