处理token过期返回到登录页面重新进行登录。
一半后台都会返回个过期时间 前端的也需要定时调用这个接口去刷新token 或者 每次去请求下接口看token是否过期。
我这这里做了这样的我操作。
// 登录操作的请求
this.$axios.post('请求地址').then(res => {
console.log('获取到了用户的token', res)
localStorage.setItem('token', JSON.stringify(res))
// 这里设置过期时间我没有用后台返回的自己换成了6个小时
// 当前时间加6个小时的时间就是token过期的时间然后存在本地缓存中
let date = new Date().getTime() + (6 * 3600 * 1000)
localStorage.setItem('tokenTime', date)
})然后在utils.js中添加公共方法 监听当前时间减去token过期的时间是否大于0
/**
* 监听token过期时间
* @return: Boolean
*/
export const tokenExpressInTime = () => {
let date = new Date()
let tokenTime = localStorage.getItem('tokenTime')
// 当前时间减去获取本地过期时间的值是否大于0 大于0为过期返回true 否则返回false
return (date.getTime() - Number(tokenTime)) > 0 ? true : false
}在axios.js中 全局拦截中添加判断代码
import { tokenExpressInTime } from '../utils/utils.js'
import { Message } from 'element-ui'
// 添加请求拦截器
service.interceptors.request.use(config => {
// 在拦截器中添加判断
// 每次接口请求的时候进行判断 tokenExpressInTime 方法返回true 并且本地存在token 则为token过期 清空本地缓存 进行重新登录的操作
if (tokenExpressInTime() && localStorage.getItem('token')) {
Message({type:'error', center: true, message:'登录超时请重新登录', duration:2000})
setTimeout(() => {
localStorage.clear()
location.href = '/'
}, 1500)
return false
}
return config;
}, error => {
console.log('error request:', error)
return Promise.reject(error);
})一般情况下后端都会返回过期时间 前端进行定时调接口。进行token刷新。
我在这里处理是前端保存起来时间 在每次进行接口请求的同时拦截进行判断。免除接口调用或者本地进行定时器的操作。
个人想法，大佬有好意见，欢迎评论区指点。
