vue设置token过期路由

login.vue 代码

    methods: {
 
      // 登录
      handleLogin() {
        this.$axios.post('/api/Login',{
         username: this.loginForm.username,
         password: this.loginForm.password
        }).then(res => {
          if(res.data.code != 0) return this.$message.error(res.data.message)
          if(res.data.code == 0){
            this.$message.success('登录成功')
            // 存储token开始时间
            window.localStorage.setItem('tokenStartTime',new Date().getTime())
            // 存储token
            window.localStorage.setItem('token',res.data.data.token)
            this.$router.push('/home/ks')
          }else {
            this.$message.error('登录失败')
          }
        })
      }
}

main.js 代码：

// 添加请求拦截器
// 拦截器的第一部分，第二部分在router index.js里面
axios.interceptors.request.use(function(config) {
  // 在发送请求之前做些什么
  // 判断是否存在token,如果存在将每个页面header添加token
  if (window.localStorage.getItem("token")) {
    config.headers.common['Access-Token'] = window.localStorage.getItem("token");
  }
  return config
})

router index.js 代码：

// 导入element提示语的组件
import {
    Message
} from 'element-ui'
 
 
// 添加请求拦截器
// 拦截器的第二部分，第一部分在main.js里面
router.beforeEach((to, from, next) => {
 
  // 获取存储localStorage的token
  let token = window.localStorage.getItem('token')
  // 获取存储token的开始时间
  const tokenStartTime = window.localStorage.getItem('tokenStartTime')
  // 后台给出的token有效时间，一个星期 单位 是秒
  // 我们自己定义6天过期，让用户重新登录一下， 用户总不可能在一个页面挂机一天吧
  const timeOver = 6 * 24 * 3600 * 1000
  // 当前时间
  let date = new Date().getTime()
  // 如果大于说明是token过期了
  if(date - tokenStartTime > timeOver) {
     token = null
  }
  // 如果token过期了
  if (!token) {
    if (to.path == '/login') return next()
    // 注意要import element的Message组件
    Message.error("登录状态过期，请重新登录")
    return next('/login')
    // 如果token没有过期，又是选择了登录页面就直接重定向到首页，不需要重新输入账户密码
  } else if (to.path == '/login') {
    return next('/home/ks')
  }
  next()
 
})
export default router