token过期处理，js处理登录身份过期，vue处理token登录过期，前端本地token过期处理，前后端分离token超时刷新策略，token过期解决

处理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刷新。

我在这里处理是前端保存起来时间 在每次进行接口请求的同时拦截进行判断。免除接口调用或者本地进行定时器的操作。

个人想法，大佬有好意见，欢迎评论区指点。

转发请标注 原创链接 谢谢   https://blog.csdn.net/weixin_38356321/article/details/103488150