美文网首页
Vue中token刷新及token过期的实现

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

作者: leesession | 来源:发表于2019-04-25 15:30 被阅读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();
      },
    

    相关文章

      网友评论

          本文标题:Vue中token刷新及token过期的实现

          本文链接:https://www.haomeiwen.com/subject/ixlzgqtx.html