vue-cookie与cookie的使用

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

  1. 在项目中加载依赖包
npm install vue-cookies --save
  1. 在main.js中添加以下代码
import VueCookies from 'vue-cookies'
Vue.use(VueCookies)
  1. 登录按钮添加点击事件
 登录
  1. 在登录的时候将登录信息放入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() 

你可能感兴趣的:(vue-cookie与cookie的使用)