刷新token

shuishen

2023-02-20 fc2df16e0802d591f258cb17c0b007358ef95cc7

刷新token

 src/api/user/index.js

New file
@@ -0,0 +1,27 @@
/*
 * @Author: shuishen 1109946754@qq.com
 * @Date: 2023-02-20 14:16:37
 * @LastEditors: shuishen 1109946754@qq.com
 * @LastEditTime: 2023-02-20 14:23:06
 * @FilePath: \srs-police-affairs\src\api\user\index.js
 * @Description: 
 * 
 * Copyright (c) 2023 by ${git_name_email}, All Rights Reserved. 
 */
import request from "@/router/axios.js"

export const refreshToken = (refresh_token, tenantId) => request({
    url: '/api/blade-auth/oauth/token',
    method: 'post',
    headers: {
        'Tenant-Id': tenantId,
        'Dept-Id': '',
        'Role-Id': ''
    },
    params: {
        tenantId,
        refresh_token,
        grant_type: "refresh_token",
        scope: "all",
    }
})

 src/router/axios.js

@@ -2,7 +2,7 @@
 * @Author: shuishen 1109946754@qq.com
 * @Date: 2022-07-29 15:19:13
 * @LastEditors: shuishen 1109946754@qq.com
 * @LastEditTime: 2023-02-20 10:11:07
 * @LastEditTime: 2023-02-20 15:59:57
 * @FilePath: \srs-police-affairs\src\router\axios.js
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 */
@@ -70,10 +70,10 @@
        }

        //headers判断是否需要
        // const authorization = config.authorization === false
        // if (!authorization) {
        //     config.headers["Authorization"] = `Basic ${Base64.encode("saber:saber_secret")}`
        // }
        const authorization = config.authorization === false
        if (!authorization) {
            config.headers["Authorization"] = `Basic ${Base64.encode("saber:saber_secret")}`
        }
        //让每个请求携带token

        //headers中配置text请求

 src/store/modules/user.js

@@ -2,22 +2,27 @@
 * @Author: shuishen 1109946754@qq.com
 * @Date: 2022-12-27 09:33:01
 * @LastEditors: shuishen 1109946754@qq.com
 * @LastEditTime: 2023-02-09 10:21:05
 * @LastEditTime: 2023-02-20 15:53:27
 * @FilePath: \srs-police-affairs\src\store\modules\user.js
 * @Description: 
 * 
 * Copyright (c) 2023 by ${git_name_email}, All Rights Reserved. 
 */

import { loginByUsername, logout } from "@/api/login/login"
import { Message } from 'element-ui'
import md5 from "js-md5"
import * as auth from '@/utils/auth'
import { setStore, getStore } from '@/utils/store'
import { refreshToken } from '@/api/user'
import { validatenull } from '@/utils/validate'

const user = {
    state: {
        tenantId: getStore({ name: 'tenantId' }) || '',
        userInfo: getStore({ name: 'userInfo' }) || [],
        token: getStore({ name: 'token' }) || '',
        refreshToken: getStore({ name: 'refreshToken' }) || '',
    },
    actions: {
        //根据用户名登录
@@ -46,6 +51,8 @@
                        } else {
                            commit("SET_TOKEN", data.access_token)
                            commit('SET_USER_INFO', data)
                            commit('SET_REFRESH_TOKEN', data.refresh_token)
                            commit('SET_TENANT_ID', data.tenant_id)
                        }
                        resolve()
                    })
@@ -61,6 +68,25 @@
                    commit('SET_TOKEN', '')
                    auth.removeToken()
                    auth.removeUserInfo()
                    auth.removeRefreshToken()
                    resolve()
                }).catch(error => {
                    reject(error)
                })
            })
        },
        //刷新token
        refreshToken ({ state, commit }, userInfo) {
            window.console.log('handle refresh token')
            return new Promise((resolve, reject) => {
                refreshToken(state.refreshToken, state.tenantId,
                    !validatenull(userInfo) ? userInfo.deptId : state.userInfo.dept_id,
                    !validatenull(userInfo) ? userInfo.roleId : state.userInfo.role_id
                ).then(res => {
                    const data = res.data
                    commit('SET_TOKEN', data.access_token)
                    commit('SET_REFRESH_TOKEN', data.refresh_token)
                    commit('SET_USER_INFO', data)
                    resolve()
                }).catch(error => {
                    reject(error)
@@ -71,12 +97,25 @@
    mutations: {
        SET_TOKEN: (state, token) => {
            auth.setToken(token)
            state.token = token
            setStore({ name: 'store-token', content: state.token })
        },
        SET_USER_INFO: (state, userInfo) => {
            state.userInfo = userInfo
            auth.setUserInfo(state.userInfo)
            setStore({ name: 'userInfo', content: state.userInfo })
        },

        SET_REFRESH_TOKEN: (state, refreshToken) => {
            auth.setRefreshToken(refreshToken)
            state.refreshToken = refreshToken
            setStore({ name: 'refreshToken', content: state.refreshToken })
        },

        SET_TENANT_ID: (state, tenantId) => {
            state.tenantId = tenantId
            setStore({ name: 'tenantId', content: state.tenantId })
        },
    }
}


 src/utils/auth.js

@@ -2,7 +2,7 @@
 * @Author: shuishen 1109946754@qq.com
 * @Date: 2022-07-28 17:50:14
 * @LastEditors: shuishen 1109946754@qq.com
 * @LastEditTime: 2022-12-26 14:31:40
 * @LastEditTime: 2023-02-20 14:39:25
 * @FilePath: \srs-police-affairs\src\utils\auth.js
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 */
@@ -18,6 +18,18 @@
    return window.sessionStorage.removeItem('token')
}

export function getRefreshToken () {
    return window.sessionStorage.getItem('refresh-token')
}

export function setRefreshToken (token) {
    return window.sessionStorage.setItem('refresh-token', token)
}

export function removeRefreshToken () {
    return window.sessionStorage.removeItem('refresh-token')
}

export const getUserInfo = () => {
    return window.sessionStorage.getItem('userInfo')
}

 src/utils/date.js

New file
@@ -0,0 +1,58 @@
export const calcDate = (date1, date2) => {
  let date3 = date2 - date1;

  let days = Math.floor(date3 / (24 * 3600 * 1000))

  let leave1 = date3 % (24 * 3600 * 1000) //计算天数后剩余的毫秒数
  let hours = Math.floor(leave1 / (3600 * 1000))

  let leave2 = leave1 % (3600 * 1000) //计算小时数后剩余的毫秒数
  let minutes = Math.floor(leave2 / (60 * 1000))

  let leave3 = leave2 % (60 * 1000) //计算分钟数后剩余的毫秒数
  let seconds = Math.round(date3 / 1000)
  return {
    leave1,
    leave2,
    leave3,
    days: days,
    hours: hours,
    minutes: minutes,
    seconds: seconds,
  }
}

/**
 * 日期格式化
 */
export function dateFormat(date, format) {
  format = format || 'yyyy-MM-dd hh:mm:ss';
  if (date !== 'Invalid Date') {
    let o = {
      "M+": date.getMonth() + 1, //month
      "d+": date.getDate(), //day
      "h+": date.getHours(), //hour
      "m+": date.getMinutes(), //minute
      "s+": date.getSeconds(), //second
      "q+": Math.floor((date.getMonth() + 3) / 3), //quarter
      "S": date.getMilliseconds() //millisecond
    }
    if (/(y+)/.test(format)) format = format.replace(RegExp.$1,
      (date.getFullYear() + "").substr(4 - RegExp.$1.length));
    for (let k in o)
      if (new RegExp("(" + k + ")").test(format))
        format = format.replace(RegExp.$1,
          RegExp.$1.length === 1 ? o[k] :
            ("00" + o[k]).substr(("" + o[k]).length));
    return format;
  }
  return '';

}

/**
 * 当前时间戳
 */
export function dateNow() {
  return dateFormat(new Date(), "yyyyMMddhhmmss");
}

 src/utils/store.js

@@ -1,6 +1,6 @@
import {
    validatenull
} from '@/utils/validate';
} from '@/utils/validate'

/**
 * 存储localStorage
@@ -10,15 +10,15 @@
        name,
        content,
        type,
    } = params;
    } = params
    let obj = {
        dataType: typeof (content),
        content: content,
        type: type,
        datetime: new Date().getTime()
    }
    if (type) window.sessionStorage.setItem(name, JSON.stringify(obj));
    else window.localStorage.setItem(name, JSON.stringify(obj));
    if (type) window.sessionStorage.setItem(name, JSON.stringify(obj))
    else window.localStorage.setItem(name, JSON.stringify(obj))
}
/**
 * 获取localStorage
@@ -28,30 +28,31 @@
    let {
        name,
        debug
    } = params;
    } = params
    let obj = {},
        content;
    obj = window.sessionStorage.getItem(name);
    if (validatenull(obj)) obj = window.localStorage.getItem(name);
    if (validatenull(obj)) return;
        content
    obj = window.sessionStorage.getItem(name)
    console.log(obj, 456)
    if (validatenull(obj)) obj = window.localStorage.getItem(name)
    if (validatenull(obj)) return
    try {
        obj = JSON.parse(obj);
    } catch{
        return obj;
        obj = JSON.parse(obj)
    } catch {
        return obj
    }
    if (debug) {
        return obj;
        return obj
    }
    if (obj.dataType == 'string') {
        content = obj.content;
        content = obj.content
    } else if (obj.dataType == 'number') {
        content = Number(obj.content);
        content = Number(obj.content)
    } else if (obj.dataType == 'boolean') {
        content = eval(obj.content);
        content = eval(obj.content)
    } else if (obj.dataType == 'object') {
        content = obj.content;
        content = obj.content
    }
    return content;
    return content
}
/**
 * 删除localStorage
@@ -60,11 +61,11 @@
    let {
        name,
        type
    } = params;
    } = params
    if (type) {
        window.sessionStorage.removeItem(name);
        window.sessionStorage.removeItem(name)
    } else {
        window.localStorage.removeItem(name);
        window.localStorage.removeItem(name)
    }

}
@@ -73,10 +74,10 @@
 * 获取全部localStorage
 */
export const getAllStore = (params = {}) => {
    let list = [];
    let list = []
    let {
        type
    } = params;
    } = params
    if (type) {
        for (let i = 0; i <= window.sessionStorage.length; i++) {
            list.push({
@@ -98,7 +99,7 @@

        }
    }
    return list;
    return list

}

@@ -106,9 +107,9 @@
 * 清空全部localStorage
 */
export const clearStore = (params = {}) => {
    let { type } = params;
    let { type } = params
    if (type) {
        window.sessionStorage.clear();
        window.sessionStorage.clear()
    } else {
        window.localStorage.clear()
    }

 src/views/layout/index.vue

@@ -2,7 +2,7 @@
 * @Author: shuishen 1109946754@qq.com
 * @Date: 2022-08-18 16:18:24
 * @LastEditors: shuishen 1109946754@qq.com
 * @LastEditTime: 2023-02-20 10:42:35
 * @LastEditTime: 2023-02-20 16:11:36
 * @FilePath: \srs-police-affairs\src\views\layout\index.vue
 * @Description: 
 * 
@@ -133,6 +133,11 @@
    HTUrl = window.BASE_URL_CONFIG.VUE_APP_INTRANET_HTURL
}


import { validatenull } from "@/utils/validate"
import { calcDate } from "@/utils/date.js"
import { getStore } from "@/utils/store.js"

import { getUserInfo, getToken } from '@/utils/auth'
export default {
    provide () {
@@ -191,7 +196,12 @@
            isShowUserDetail: false,
            user: {},

            currentUserInfo: JSON.parse(getUserInfo())
            currentUserInfo: JSON.parse(getUserInfo()),

            //刷新token锁
            refreshLock: false,
            //刷新token的时间
            refreshTime: ""
        }
    },

@@ -206,6 +216,9 @@
                path: HTUrl
            })
        }

        //实时检测刷新token
        this.refreshToken()
    },

    watch: {
@@ -315,6 +328,30 @@
            this.userOn = !this.userOn
            this.isShowUserDetail = !this.isShowUserDetail
        },

        // 定时检测token
        refreshToken () {
            this.refreshTime = setInterval(() => {
                const token = getStore({
                    name: "store-token",
                    debug: true
                }) || {}
                const date = calcDate(token.datetime, new Date().getTime())
                console.log(6688, date, token)
                if (validatenull(date)) return
                if (date.seconds >= 3000 && !this.refreshLock) {
                    this.refreshLock = true
                    this.$store
                        .dispatch("refreshToken")
                        .then(() => {
                            this.refreshLock = false
                        })
                        .catch(() => {
                            this.refreshLock = false
                        })
                }
            }, 10000)
        }
    }
}
</script>