Vue中token的實現

在學習vue的過程中，正好項目中做的web系統對安全性有要求

轉載自https://www.jianshu.com/p/d1a3fb71eb99

 

總：通過axios，vuex，及自定義的方法實現。
以下是思路：
1.做token刷新必不可少的是，token（請求時的token） / refresh_token（刷新token時用的refresh_token） / resetTime（token有效時間）
2.通過axios請求-回復來做相應的操作，具體實現如下：

對應修改之處：（自己看的，如果疑問，可留言）
一、在 main.js中 ，寫入如下代碼

import axios from 'axios'
import { getRefreshToken, isRefreshTokenExpired} from './assets/js/format' //刷新token的接口與過期時間倒計時
window.isReresh = false;//用於判斷是否刷新，不能少

// 添加請求攔截器，在請求頭中加token
axios.interceptors.request.use(
  config => {
    let token = sessionStorage.getItem('Authorization');
    if (token) {
      config.headers.Authorization = token;
    }
    return config;
  },
  error => {
    return Promise.reject(error);
  });

// http response 攔截器
axios.interceptors.response.use(
  response => {
    let resetTime= sessionStorage.getItem('resetTime');
    let token = sessionStorage.getItem('Authorization');
    if(token){//有沒有token
      isRefreshTokenExpired(resetTime);
      if(resetTime<1200){//時間少於20分鍾(1200)，20分鍾之內為期限
        if(!window.isReresh){
          window.isReresh = true;
          let refresh_token = sessionStorage.getItem('refresh_token')
          getRefreshToken(refresh_token).then(res => {
            window.isReresh = false;
            isRefreshTokenExpired(res.data.resetTime);// 重新獲取的token有效時間
            store.commit('changeLogin',{//vuex中修改相關信息
              Authorization:res.data.access_token,
              token_type:res.data.token_type,
              refresh_token:res.data.refresh_token,
            });
          }).catch(err => {});
        }
      }else window.isReresh = false;
      }

    return response;  //請求成功的時候返回的data
  },
  error => {
    try {
      if (error.response) {
        endLoading();
        switch (error.response.status) {
          case 401://token過期，清除它,清除token信息並跳轉到登錄頁面
            store.commit('DelToken');
            router.replace({
              path: '/login',
              query: {
                redirect: router.currentRoute.fullPath//登錄之后跳轉到對應頁面
              }
            });
            return;
          case 403://權限
            store.commit('DelToken');
            router.replace({
              path: '/login',
              query: {
                redirect: router.currentRoute.fullPath//登錄之后跳轉到對應頁面
              }
            });
            return;
        }
      }
      return Promise.reject(error.response.data)
    }
    catch (e) {
    }
  });

二、在 自定義的jsformat.js中 ，寫入如下代碼

export function getRefreshToken(param) { // 刷新token 注意這里用到的service
  let params = {
    refreshToken:param
  }
  return axios.post(baseUrl+'/account-center/refresh/token',params)
    .then((res) => {
      return Promise.resolve(res.data)
    })
}

export function isRefreshTokenExpired(timestamp) {
  clearInterval(window.interval);
  window.interval = setInterval(()=>{
    timestamp=timestamp-1
    sessionStorage.setItem('resetTime',timestamp)
  },1000)
}

三、在vuex中的mutation中

changeLogin: function (state, user ) {
    // CryptoJS.enc.Base64.stringify(obj) 加密
    // CryptoJS.enc.Base64.parse(base64).toString(CryptoJS.enc.Utf8) 解密
    state.Authorization = user.token_type + ' ' + user.Authorization;
    state.refresh_token = user.refresh_token;
    state.user_message = CryptoJS.enc.Base64.parse(user.Authorization.split('.')[1]).toString(CryptoJS.enc.Utf8);
    sessionStorage.setItem('Authorization', state.Authorization);
    sessionStorage.setItem('user_message', state.user_message);
    sessionStorage.setItem('refresh_token', state.refresh_token);
  },
  DelToken(state){
    state.Authorization = '';
    sessionStorage.clear();
  },