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();
  },