快捷導(dǎo)航

Vue中登錄驗(yàn)證成功后保存token,并每次請(qǐng)求攜帶并驗(yàn)證token操作

更新時(shí)間：2020年09月08日 09:19:34 作者：WByangqq

這篇文章主要介紹了Vue中登錄驗(yàn)證成功后保存token,并每次請(qǐng)求攜帶并驗(yàn)證token操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧

在vue中，可以用**Storage（sessionStorage，localStorage）**來存儲(chǔ)token，也可以用vuex來存儲(chǔ)（但要考慮頁(yè)面刷新數(shù)據(jù)消失問題，可以在vuex用Storage），

下面介紹用localStorage來存儲(chǔ)：

在登錄請(qǐng)求成功后，會(huì)返回一個(gè)token值，用loaclStorage保存

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

在main.js中設(shè)置全局請(qǐng)求頭和響應(yīng)回來的判斷

//設(shè)置axios請(qǐng)求頭加入token
Axios.interceptors.request.use(config => { 
 if (config.push === '/') { 
  } else { 
   if (localStorage.getItem('token')) { 
     //在請(qǐng)求頭加入token，名字要和后端接收請(qǐng)求頭的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); 
  })

在router中的index設(shè)置全局守衛(wèi)來判斷是否存在token，不存在就返回登錄頁(yè)

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

補(bǔ)充知識(shí)：Vue獲取并存儲(chǔ)服務(wù)器返回的AuthorizationToken信息并給每次請(qǐng)求添加上token

由于后臺(tái)是用jwt的token進(jìn)行身份權(quán)限驗(yàn)證，后臺(tái)在登錄后把token添加響應(yīng)頭里，所以前臺(tái)需要把這個(gè)token存放起來，并給每次請(qǐng)求的請(qǐng)求頭添加上token，服務(wù)器才能獲取token進(jìn)行身份認(rèn)證。

前臺(tái)使用vue項(xiàng)目:

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);
  //獲取并存儲(chǔ)服務(wù)器返回的AuthorizationToken信息
  var authorization=successResponse.headers['authorization'];
  localStorage.setItem('authorization',authorization);
  //登錄成功跳轉(zhuǎn)頁(yè)面
  this.$router.push('/dashboard');
  
  }
  })
  .catch(failResponse => {})
 }
 }

main.js(全局配置js):

//自動(dòng)給同一個(gè)vue項(xiàng)目的所有請(qǐng)求添加請(qǐng)求頭
axios.interceptors.request.use(function (config) {
 let token = localStorage.getItem('authorization');
 if (token) {
 config.headers['Authorization'] = token;
 }
 return config;
})

這里還需要考慮token過期失效的問題，博主將會(huì)在后續(xù)另寫博客補(bǔ)充。

以上這篇Vue中登錄驗(yàn)證成功后保存token,并每次請(qǐng)求攜帶并驗(yàn)證token操作就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章: