vue配合cookie进行登录记住密码以及请求验证 以及记住密码功能

vue配合cookie进行登录记住密码以及请求验证 以及记住密码功能
使用cookie时先在项目中导入vue-cookie包
npm install vue-cookies --save
在main.js中引入
import Vue from ‘vue’
import VueCookies from ‘vue-cookies’
Vue.use(VueCookies)

登录框界面login.vue

<template>
  <div class="main" v-loading="loading">
    <div class="login_body">
      <el-form ref="form" label-width="80px">
        <el-form-item label="用户名：">
          <el-input v-model="form.username"></el-input>
        </el-form-item>
        <el-form-item label="密码：">
          <el-input type="password" v-model="form.password"></el-input>
        </el-form-item>
        <el-form-item>
          <el-checkbox v-model="rememberMe">记住我</el-checkbox>
        </el-form-item>
        <el-button type="primary" @click="btnLogin" @keyup.enter.native="btnLogin">Login</el-button>
      </el-form>
    </div>
  </div>
</template>
<script>
import { reqInfo } from "../Api";
import { mapState } from "vuex";
export default {
  name: "login",
  data() {
    return {
      form: {
        grant_type: "password",
        scope: "SJZN",
        username: "",
        password: "",
        client_id: "SJZN_App",
        client_secret: "1q2w3e*",
      },
      rememberMe: false,
      loading: false,
    };
  },
    mounted() {
        this.getCookie();
    },
  methods: {
    btnLogin() {
      //QS使用的目的
      //正常用Json方式提交
      //将对象序列化A=1&b=2&c=3这种方式提交
      let result1;
      var qs = require("qs");
      this.loading = true;
      this.$axios
        .post("/connect/token", qs.stringify(this.form), {
          headers: {
            "Content-Type": "application/x-www-form-urlencoded",
          },
        })
        .then((response) => {
          console.log(response.status);
          if (response.status == 200) {
            this.$axios
              .get("/api/abp/application-configuration")
              .then((res) => {
                var result = res.data.currentUser;
                console.log(result);
              });
            result1 = reqInfo();
            console.log(result1);
            this.$router.push("/robotSurveillance");
            this.loading = false;
          } else if (response.status == 400) {
            console.log("登陆失败");
          }
          sessionStorage.setItem("access_token", response.data.access_token); //保存为本次会话
          // this.$router.push('/') 跳转
          if (this.rememberMe == true) {
            const self = this;
            self.setCookie(self.form.username, self.form.password, 7);
            //如果记住我打钩将token保存在本地
            localStorage.setItem("access_token", response.data.access_token); //永久保存，直到浏览器清除缓存
          } else {
            self.clearCookie(); //如果没有选中记住密码，那就清除cookie
          }
        })
        .catch((error) => {
          console.log(error.response);
        });
    },
    setCookie(c_name, c_pwd, exdays) {
      var exdate = new Date(); //获取时间
      exdate.setTime(exdate.getTime() + 24 * 60 * 60 * 1000 * exdays); //保存的天数
      //字符串拼接cookie
      window.document.cookie =
        "userName" + "=" + c_name + ";path=/;expires=" + exdate.toGMTString();
      window.document.cookie =
        "userPwd" + "=" + c_pwd + ";path=/;expires=" + exdate.toGMTString();
    },
    //读取cookie
    getCookie: function () {
      if (document.cookie.length > 0) {
        var arr = document.cookie.split("; "); //这里显示的格式需要切割一下自己可输出看下
        for (var i = 0; i < arr.length; i++) {
          var arr2 = arr[i].split("="); //再次切割
          //判断查找相对应的值
          if (arr2[0] == "userName") {
            this.form.username = arr2[1]; //保存到保存数据的地方
          } else if (arr2[0] == "userPwd") {
            this.form.password = arr2[1];
          }
        }
      }
    },
    //清除cookie
    clearCookie: function () {
      this.setCookie("", "", -1); //修改2值都为空，天数为负1天就好了
    },
  },
};
</script>
<style scoped>
.main {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background: url("../assets/image/bg2.jpg") no-repeat;
  background-size: 100% auto;
}
.container {
  width: 100%;
  height: 100%;
  min-width: 1280px;
  background-size: 100% 100%;
  background: url("../assets/image/bg1.jpg");
  position: relative;
}
.m-t-50 {
  margin-top: 0;
}
.login {
  width: 300px;
  height: 400px;
  background-color: #fff;
  position: absolute;
}
.loginBtn {
  margin-top: 15px;
  background-color: #2f41e7;
}

footer {
  width: 1280px;
  display: flex;
  justify-content: space-around;
  position: fixed;
  bottom: 16px;
  left: 50%;
  transform: translate(-50%);
  color: #fff;
  font-size: 12px;
}
.form {
  position: relative;
}
.code {
  position: absolute;
  right: 0;
  top: 0;
  width: 110px;
  height: 42px;
}
.input {
  width: 100%;
}
.login_body {
  width: 300px;
  height: 300px;
}
.bottom {
  position: relative;
}
.login_body .el-checkbox {
  position: absolute;
  right: 10px;
  top: 35px;
}
</style>