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