vue-router + vue-cookies实现登录超时退出

1.一般登陆都会将登陆信息放入cookie中，vue中需要借助 vue-cookies.

// main.js 文件
const $cookies = require('vue-cookies')
Vue.use($cookies)

2.在登录的时候将登录信息放入cookie中

    // 登陆组件，template部分省略
    this.$axios({
      method: "post",
      url: login,
      data: {
        userName: 'root',
        password: 'root'
      }
    })
      .then(({data}) => {
        if (data.message === "success") {
          this.$cookies.set("status", "logined", 30 * 60); // 设置cookie中存放的生命周期
          let redirect = decodeURIComponent(
            this.$route.query.redirect || "/home"
          );
          this.$router.push({path: redirect});
          this.$message({
            title: '提示',
            type: 'success',
            message: '登录成功！'
          });
        } else {
          this.$message({
            title: '提示',
            type: 'info',
            message: '用户名或密码错误！请重新登录！'
          });
        }
      });

3.在route.js文件中注册全局前置守卫

// 定义路由
import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)

router.beforeEach((to, from, next) => {
  if (to.matched.some(record => record.meta.requiresAuth)) {
    if (router.app.$cookies.get("status") !== "logined") {
      next({
        path: '/login',
        query: { redirect: to.fullPath } // 把要跳转的地址作为参数传到下一步
      })
    } else {
      next()
    }
  } else {
    if (to.query && to.query.redirect) {
      if (router.app.$cookies.get("status") === "logined") {
        next({path: to.query.redirect})
      } else {
        next()
      }
    } else {
      next() // 确保一定要调用 next()
    }
  }
})

上面就可以设置当cookie中的信息过期之后，再次请求新的路由，会直接跳转到登录页面。