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

在router中的index設定全域性守衛來判斷是否存在token，不存在就返回登入頁

router.beforeEach((to,from,next) => {
//to到哪兒 from從哪兒離開 next跳轉 為空就是放行 
 if (to.path === '/') {
 //如果跳轉為登入，就放行 
 next(); 
 } else {
 //取出localStorage判斷
  let token = localStorage.getItem('token ');   
  if (token == null || token === '') { 
    console.log('請先登入')  
    next({name: 'login'});
   } else {
     next(); 
   } 
}});

補充知識：Vue獲取並存儲伺服器返回的AuthorizationToken資訊並給每次請求新增上token

由於後臺是用jwt的token進行身份許可權驗證，後臺在登入後把token新增響應頭裡，所以前臺需要把這個token存放起來，並給每次請求的請求頭新增上token，伺服器才能獲取token進行身份認證。

前臺使用vue專案:

loging.vue(登入元件)

{
 submitForm(formName) {
 this.$axios
  .post('/api/admin/login',{
  userName: this.ruleForm.userName,password: this.ruleForm.password
  })
  .then(successResponse => {
  this.responseResult = JSON.stringify(successResponse.data)
  this.msg = JSON.stringify(successResponse.data.msg)
  if (successResponse.data.code === 200) {
  this.msg='';
  localStorage.setItem('userName',this.ruleForm.userName);
  //獲取並存儲伺服器返回的AuthorizationToken資訊
  var authorization=successResponse.headers['authorization'];
  localStorage.setItem('authorization',authorization);
  //登入成功跳轉頁面
  this.$router.push('/dashboard');
  
  }
  })
  .catch(failResponse => {})
 }
 }

main.js(全域性配置js):

//自動給同一個vue專案的所有請求新增請求頭
axios.interceptors.request.use(function (config) {
 let token = localStorage.getItem('authorization');
 if (token) {
 config.headers['Authorization'] = token;
 }
 return config;
})

這裡還需要考慮token過期失效的問題，博主將會在後續另寫部落格補充。

以上這篇Vue中登入驗證成功後儲存token,並每次請求攜帶並驗證token操作就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支援我們。