如何在Vue中實現(xiàn)登錄成功后保存token

發(fā)布時間：2020-11-04 16:48:41 來源：億速云閱讀：3892 作者：Leah 欄目：開發(fā)技術

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

在vue中，可以用**Storage（sessionStorage，localStorage）**來存儲token，也可以用vuex來存儲（但要考慮頁面刷新數(shù)據(jù)消失問題，可以在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設置全局守衛(wèi)來判斷是否存在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;
})

關于如何在Vue中實現(xiàn)登錄成功后保存token就分享到這里了，希望以上內容可以對大家有一定的幫助，可以學到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到。

向AI問一下細節(jié)

如何在Vue中實現(xiàn)登錄成功后保存token

猜你喜歡

最新資訊

相關推薦

相關標簽