1.使用请求拦截器,拦截vue所有请求,增加token参数
使用倒数计时,假如token有效期60分钟,会在59分钟的时候去重新拿着refresh_Token,去请求新的token.
注意:如果一个账号允许多人登录使用,上述方法没有问题,但是如果一个账号只允许一人登录,一个地点登录,那上述方法就不那么全面,这时候可以采用使用响应拦截器,拦截状态码进行对应的异常处理,然后判断哪些是token失效,再进行对应的登出操作或者是重新获取token。
2.完整代码
import axios from 'axios'
import { getToken } from '@/utils/auth'
import { getToken_refresh } from '@/api/users'
import router from '../router/index';// 创建axios实例
const service = axios.create({baseURL: 'http://122.152.250.75:10101', // api的base_url// baseURL: 'http://127.0.0.1:8081/auth',timeout: 10000 // 请求超时时间
})/*是否有请求正在刷新token*/
window.isRefreshing = false
/*被挂起的请求数组*/
let refreshSubscribers = []/*获取刷新token请求的token*/
function getRefreshToken () {return localStorage.getItem("refresh_token")
}/*push所有请求到数组中*/
function subscribeTokenRefresh (cb) {refreshSubscribers.push(cb)
}/*刷新请求(refreshSubscribers数组中的请求得到新的token之后会自执行,用新的token去请求数据)*/
function onRrefreshed (token) {refreshSubscribers.map(cb => cb(token))
}// request 请求拦截器
service.interceptors.request.use(config => {if (getToken()) {config.params['access_token'] = getToken() // 让每个请求携带自定义token 请根据实际情况自行修改/*判断token是否将要过期*/var istoken = isTokenExpired();if (istoken) {/*判断是否正在刷新*/if (!window.isRefreshing) {/*将刷新token的标志置为true*/window.isRefreshing = true/*发起刷新token的请求*/var params = {refresh_token: localStorage.getItem('refresh_Token'),};getToken_refresh(params).then((res) => {/*将标志置为false*/window.isRefreshing = false/*成功刷新token*/// config.headers.Authorization = res.data.data.token_type + ' ' + res.data.data.token/*更新auth*/if(res.data.code == 0){alert("登录超时,请重新登录");router.push({ path: '/login' })return}localStorage.setItem('Token',res.data.data.access_token);localStorage.setItem('refresh_Token',res.data.data.refresh_token);localStorage.setItem("expired_at",res.data.data.expired_at);config.params['access_token'] = getToken()/*执行数组里的函数,重新发起被挂起的请求*/onRrefreshed(res.data.data.access_token)/*执行onRefreshed函数后清空数组中保存的请求*/refreshSubscribers = []}).catch(err => {alert(err.response.data.message)/*清除本地保存的auth*/// localStorage.removeItem('auth')window.location.href = '#/login'})}/*把请求(token)=>{....}都push到一个数组中*/let retry = new Promise((resolve, reject) => {/*(token) => {...}这个函数就是回调函数*/subscribeTokenRefresh((token) => {// config.headers.Authorization = 'Bearer ' + tokenconfig.params['access_token'] = token/*将请求挂起*/resolve(config)})})return retry}}else{router.push({ path: '/login' })}return config
}, error => {// Do something with request errorconsole.log("11111"+error) // for debugPromise.reject(error)
})// response 响应拦截器
service.interceptors.response.use(response => {// console.log(response)if (response.status !== 200) {if(response.status === 500) { // 服务器断开this.$message({showClose: true,message: '服务器断开,请稍后重试。',type: 'error'});}return Promise.reject(new Error(response.message || 'Error'))} else {return response}},error => {// console.log("cesc"+error)if (error.response.status === 401) { // token失效 ,重新获取tokenvar params = {refresh_token: localStorage.getItem('refresh_Token'),};getToken_refresh(params).then((res) => {/*更新auth*/if(res.data.code == 0){alert("登录超时,请重新登录");router.push({ path: '/login' })return}localStorage.setItem('Token',res.data.data.access_token);localStorage.setItem('refresh_Token',res.data.data.refresh_token);localStorage.setItem("expired_at",res.data.data.expired_at);}).catch(err => {alert(err.response.data.message)/*清除本地保存的auth*/// localStorage.removeItem('auth')window.location.href = '#/login'})}else if(error.response.status === 500) { // 服务器断开alert("服务器断开,请稍后重试。");}else if(error.response.status === 403){ //无auth授权,后台不允许访问alert("不允许访问,请与技术人员联系");}return responsereturn Promise.reject(error)}
)
/*判断token是否过期*/
function isTokenExpired() {let expiredTime = new Date().getTime() / 1000;/*从localStorage中取出token过期时间*/if(localStorage.getItem("expired_at") != undefined && localStorage.getItem("expired_at") != "undefined"){expiredTime = new Date(localStorage.getItem("expired_at")).getTime() / 1000}/*获取本地时间*/let nowTime = new Date().getTime() / 1000/*如果 < 10分钟,则说明即将过期*/var flag = (expiredTime - nowTime) < 10*60;// return (expiredTime - nowTime) < 10*60;return flag;
}
export default service