Vue刷新token，判断token是否过期、失效的最简便的方法

刷新token和token是否过期的操作都是由后端实现，前端只负责根据code的不同状态来做不同的操作：⼀、判断token是否过期、失效

举例：⼀般响应状态码 code :0，表⽰请求成功。①响应状态码 code:10010表⽰token过期 ②响应状态码 code:10011 表⽰token⽆效。这些状态码都由你⾃⼰和后端的同学⼀起定义。code等于10010和10011这两种状态都会跳转到登录页，重新进⾏登录并获取最新的token。⼆、在⼀定时间内刷新token

为什么需要刷新token?因为出于安全性的考虑,⼀般是⼀天或⼏个⼩时更新token，看项⽬需要。

怎么实现？我和后端的同学是这么定义的，在发送任何⼀次请求时，如果需要更新token,响应体中后端的同学给我返回了token这个字

段，token出现在了响应体中，说明这时候是需要刷新token的（其他⾮刷新token的请求时是没有token字段的），这时⽤localStorage保存最新token，⾃动覆盖掉原来旧的token，这样下次再调⽤新接⼝时⽤的就是最新的token了，这样⽤户也感知不到token更新的过程。

三、具体实现

/**

* 全局变量 和 设置 、配置等。。。*/

import axios from 'axios' // 引⼊axios

import Storage from '@/assets/js/util/storage.js' // storage⼯具类，简单的封装

axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded'

/* 请求 */

axios.interceptors.request.use(function (config) { // 每次请求时会从localStorage中获取token

let token = Storage.localGet('token')

if (token) {

token = 'bearer' + ' ' + token.replace(/'|\"/g, '') // 把token加⼊到默认请求参数中

config.headers.common['Authorization'] = token }

return config

}, function (error) {

return Promise.reject(error) })

/* 响应 */

axios.interceptors.response.use(function (response) { // ①10010 token过期（30天） ②10011 token⽆效

if (response.data.code === 10010 || response.data.code === 10011) {

Storage.localRemove('token') // 删除已经失效或过期的token（不删除也可以，因为登录后覆盖）

router.replace({

path: '/login' // 到登录页重新获取token })

} else if (response.data.token) { // 判断token是否存在，如果存在说明需要更新token

Storage.localSet('token', response.data.token) // 覆盖原来的token(默认⼀天刷新⼀次) }

return response

}, function (error) {

return Promise.reject(error)}）

缓存⼯具类 Storage

var Storage = {

// ==================sessionsTorage设置缓存================ // 设置缓存

sessionSet: function (name, data) { sessionStorage.removeItem(name)

sessionStorage.setItem(name, JSON.stringify(data)) },

// 获取缓存

sessionGet: function (name) {

return JSON.parse(sessionStorage.getItem(name)) },

// 清除缓存

sessionRemove: function (name) { sessionStorage.removeItem(name) },

// ==================localStorage设置缓存================== // 设置缓存

localSet: function (name, data) { localStorage.removeItem(name)

localStorage.setItem(name, JSON.stringify(data)) },

// 获取缓存

localGet: function (name) {

return JSON.parse(localStorage.getItem(name)) },

// 清除缓存

localRemove: function (name) { localStorage.removeItem(name) } }

export default Storage