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.response
if(status == 401){
Message.error("token失效，请重新登录")
localStorage.removeItem('eleToken')
router.push('/login')
}
return Promise.reject(error)
})
export default axios这个代码相当于是对axios进行了二次封装，有很重要的两点：
- 请求拦截时，把token写进请求头中
- 页面响应时，判断token是否失效，失效的状态码为401，一旦监测到出现了401的错误码，就说明token过期了，删除、重定向
我懒得去验证这是不是正确的了，但是我觉得应该没啥问题
到此这篇关于vue中对token有效期的深入理解的文章就介绍到这了,更多相关vue token有效期内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！