Vue-router +vue-cookies 存储登录信息与超时返回登录

1. 在项目中加载依赖包

npm install vue-cookies --save

2. 在main.js中添加以下代码

import VueCookies from 'vue-cookies'
Vue.use(VueCookies)

3. 登录按钮添加点击事件

 <a-button type="primary" :loading="Isload" @click="loginIn()">登录</a-button>

4. 在登录的时候将登录信息放入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: '用户名或密码错误！请重新登录！'
          });
        }
      });

vue-cookies的用法

  设置 cookie

this.$cookies.set(keyName, time)

  获取 cookie

this.$cookies.get(keyName)

  删除cookie

this.$cookies.remove(keyName) 

  查看一个cookie是否存在（通过KeyName）

this.$cookies.isKey(keyName)   

  　获取所有cookie名称

this.$cookies.keys()