vue中对token的有效期的理解

保持登录是每个web页面必须要做的，不能一直不停的让用户进行登录，也不能让用户不登录就直接进入页面。token在保持登录中起到了非常重要的作用，我之前写过一篇博客，vue存储和使用后端传递过来的token，这篇博客详细的说明了后端如何向前端传递token，前端如何将token保存在localstorage中，并通过请求拦截的方式判断token是否过期。我不确定这么写是否真的能起到作用，因为我后面写代码的时候，我发现我后端明明设定的token的有效期是10个小时，而本地localstorage中还一直有这个token并没有清除。于是想了个办法，在路由守卫这个环节设置token的有效期，并进行验证。记录一下。

前端新设置一个token的有效期

代码写在路由处理文件中（router/index.js）

// 路由守卫
import jwt_decode from 'jwt-decode'
router.beforeEach((to, from, next) => {const EXPIRESTIME = 86400  const isLogin = localStorage.mytoken ? true : false;if (isLogin){const decode = jwt_decode(localStorage.mytoken)const date = parseInt(new Date().getTime() / 1000)if ((date - decode.iat) > EXPIRESTIME){localStorage.removeItem('mytoken')next("/login");}}if (to.path == "/login" || to.path == "/register") {next();} else {isLogin ? next() : next("/login");}
});

上面的代码可以看出，我设定了一个有效期EXPIRESTIME = 86400，也就是246060一天的时间

如果本地存储了token的话，我就对这个token进行解码，获得这个token的创建时间iat，并与当前时间new Date().getTime()进行比较，注意这里有个坑，当前时间是int型数据，单位是毫秒，而iat虽然也是int型数据，但单位是秒，所以我把当前时间除以1000再比较

如果超过了这个有效期，就清除这个token，然后重定向至登录页面

后面的路由守卫比较简单，就是正常的放行规则了

仍然使用后端token的有效期

我想来想去，还是觉得上面的思路有点不正常

既然后端已经设置了有效期，为啥前端还要这么操作呢，可能自己对全栈的理解还是不到位，我又重新看了一下自己大半个月前写的那篇博客，我觉得这个做法应该是科学可行的，还是把代码上上来

import axios from "axios";
import { Message, Loading } from 'element-ui';
import router from "./router"let loading;
function startLoading(){loading = Loading.service({lock: true,text: '数据加载中',background: 'rgba(0,0,0,0.7)'})
}function endLoading(){loading.close();
}// 请求拦截
axios.interceptors.request.use(config => {startLoading();if(localStorage.eleToken){// 设置统一的请求头config.headers.Authorization = localStorage.eleToken}return config
}, error => {return Promise.reject(error)
})//响应拦截
axios.interceptors.response.use(response => {endLoading();return response
}, error => {// 错误提醒endLoading();Message.error(error.response.data)// 获取错误状态码const {status} = error.responseif(status == 401){Message.error("token失效，请重新登录")localStorage.removeItem('eleToken')router.push('/login')}return Promise.reject(error)
})export default axios

这个代码相当于是对axios进行了二次封装，有很重要的两点：

请求拦截时，把token写进请求头中
页面响应时，判断token是否失效，失效的状态码为401，一旦监测到出现了401的错误码，就说明token过期了，删除、重定向

我懒得去验证这是不是正确的了，但是我觉得应该没啥问题

大前端写的还真是焦头烂额。。。