Vue中token刷新及token过期的实现

Myth丶恋晨 2022-11-06 14:00 418阅读 0赞

总：通过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();
      },