vue中实现token过期后退出登录，定时退出

一些安全性较高的app都会做登陆过期，比如银行的app，在一段时间没有操作后就会自动退出登录

思路：设置一个计时器，在请求的时候刷新这个计时器，在没有任何操作的时候根据计时器的过期，然后删除在localStorage缓存的值，达到退出登陆的目的

设置路由全局守卫permassion.js并且引入到main.js中
main.js中引入

import './permassion'   // 你的全局路由守卫文件路径

permassion.js内容
在全局路由中调用监听token的setstorage.js（这里是在发送请求后，路由守卫就会重新刷新计时，也就是说用户还有操作）

import router from './router'
import store from './store'  // 调取vuex
import setStorage from '@/router/component/storage'  // 监听token过期的方法

// import log from '@/utils/util.log'
// const whiteList = ['/login']
// 设置全局守卫
router.beforeEach(async(to, from, next) => {
  setStorage.getItem('token')  // 监听token（不加这个的话在token未过期前关闭浏览器，然后在token过期后打开就。。你懂得）
  // 获取用户登录成功后储存的登录标志
  const getFlag = localStorage.getItem('Flag')
  if (getFlag === 'isLogin') { // 已经登陆（这个状态要在你的login请求成功后添加）
    // setStorage.getItem('token') // 监听token
    if (setStorage.getItem('token') === false) {
      localStorage.clear()
      alert('登录已过期,请重新登录')
      window.location.href = '/#/home'
    } else {
      var tokens = store.state.token
      setStorage.setItem({// 刷新存储token  刷新过期时间是毫秒
        value: tokens,
        name: 'token',
        // expires: 60000  // 一分钟
        expires: 1800000 // 30分钟
      })
      next()
    }
  }
// 这里可能少 “ } ”
})

setstorage.js内容：
定时器的一些逻辑

const myStorage = (function() {
  function setItem(params) { // 存入localStorage方法
    // 存入的参数
    const obj = {
      name: '', // 存入的名字
      value: '', // 存入的值
      expires: '', // 过期时间
      startTime: new Date().getTime() // 存入的时间
    }
    const options = {} // 将obj 和传进来的params 合并  放到options里面 实现js中浅拷贝
    Object.assign(options, obj, params)
    // 判断用户是否设置了过期时间
    if (options.expires) {
      //  以options.name为key,    options为值放进去
      localStorage.setItem(options.name, JSON.stringify(options))
    } else {
      // 如果 options.expires 没有设置的话， 就判断一下value的类型
      // 注意localStorage 只能存储字符串 像是数组和对象要转换下
      const type = Object.prototype.toString.call(options.value)
      if (type === '[object Object]' || type === '[object Array]') {
        options.value = JSON.stringify(options.value)
      }
      localStorage.setItem(options.name, options.value)
    }
  }
  // 获取数值
  function getItem(name) {
    let item = localStorage.getItem(name)
    // 判断 item 是否存在
    if (item) {
      // 先将取到的对象 看能转换成object 对象格式，不能就说明不是json字符串形式
      try {
        item = JSON.parse(item)
      } catch (error) {
        // eslint-disable-next-line no-self-assign
        item = item
      }
      // 如果有expires的值,说明设置了失效时间
      if (item.expires) {
        // 获取当前时间
        const now = new Date().getTime()
        // 当前的时间和存入时候的时间 进行相减 和过期时间进行比较
        // 大于就说明过期了 清除存储  小于或者等于 就没有过期
        if (now - item.startTime > item.expires) {
          localStorage.removeItem(name)
          return false // 返回一个状态值
        } else {
          // 缓存未过期，返回值
          return item.value
        }
      } else {
        // 没有设置过期时间，直接返回值
        return item
      }
    } else {
      return false // 如果item 值为undefined 则说明没有存储 返回false
    }
  }

  // 移除指定的缓存
  function removeItem(name) {
    localStorage.removeItem(name)
  }
  // 移除所有的存储数据
  function clear() {
    localStorage.clear()
  }
  return { // 返回 执行接口
    setItem,
    getItem,
    removeItem,
    clear
  }
})()
export default myStorage // 暴露方法

说明
主要的方法：setStorage.getItem(‘token’) //监听token(存入的名字)
setStorage.js内还封装了其他的一些方法

  return { // 返回 执行接口
    setItem,
    getItem,
    removeItem,
    clear
  }

后面就可以根据判断退出登陆了