vue路由守卫+cookie实现页面跳转时验证用户是否登录----（一）cookie篇

            /*
            *
 * @description 保存cookie
 * @param {Object} json 需要存储cookie的对象
 * @param {Number} days 默认存储多少天
 
            */
            function
             setCookie(json, days) {
    
            //
             设置过期时间
    let data = new Date(
        new Date().getTime() + days * 24 * 60 * 60 * 1000
    ).toUTCString();

    for (var key in json) {
        document.cookie = key + "=" + json[key] + "; expires=" + data;
    }
}

/** 
 * @description 获取cookie
 * @param {String} name 需要获取cookie的key
 */function getCookie(name) {
    var arr = document.cookie.match(new RegExp("(^| )" + name + "=([^;]*)(;|$)"));
    if (arr != null) {
        return unescape(arr[2])
    } else {
        returnnull
    }
}

/** 
 * @description 删除cookie
 * @param {String} name 需要删除cookie的key
 */function clearCookie(name) {
    let json = {};
    json[name] = ‘‘;
    setCookie(json, -1)
}

export default {
    setCookie,
    getCookie,
    clearCookie
}

<template>
  <div>
    <form action>
      <div>
        账号：
        <input type="text" v-model="name" />
      </div>
      <div>
        密码：
        <input type="password" v-model="password" />
      </div>
      <div>
        <button @click="login" type="submit">登录</button> 
      </div>
    </form>
  </div>
</template>

<script>

export default {
  data() {
    return {
      name: "",
      password: ""
    };
  },
  methods: {    
    login() {
        if (!this.name) {
          alert("请填写账号");
          return;
        }
        if (!this.password) {
          alert("请输入密码");
          return;
        }
        if(this.password&&this.name){
          // 以json格式传给setCookie方法存入信息,方法里面会循环遍历该json以单个数据存储的方式，多次存入cookie中
　　　　　　// 注：cookie不支持直接以json的方式存入
          let loginInfo={
            LoginName:this.name,
            openId:"asfafsfsfsdfsdfsdfdsf"
          }
          // 调用setCookie方法，同时传递需要存储的数据，保存天数this.cookie.setCookie(loginInfo,7)
          alert("登录成功")
          // 跳转到首页this.$router.replace(‘/‘)
        }
    }
  }
};
</script>