vue项目登陆页记住密码功能以及菜单权限

<template>
  <div class="login_bg">
    <div class="login_wrap">
      <div class="el-login">
        <div class="title">{{loginTitle}}</div>
        <!--登录表单-->
        <el-form ref="formRef" class="form_wrap" :rules="formRules" :model="formInfo">
          <el-form-item style="margin-bottom: 40px;" prop="phone">
            <el-input class="inputStyle" v-model="formInfo.phone" placeholder="请输入用户名/账号"></el-input>
          </el-form-item>
          <el-form-item prop="password">
            <el-input type="password" autocomplete="off" class="inputStyle" v-model="formInfo.password" placeholder="请输入密码" show-password @keyup.enter.native="submitForm"></el-input>
          </el-form-item>
          <el-form-item class="forget_wrap">
            <el-checkbox v-model="checked" class="checkbox_btn">记住密码</el-checkbox>
            <!-- <a href class="forget_btn">忘记密码</a> -->
          </el-form-item>
          <el-form-item>
            <!--            <el-button type="primary" @click="onSubmit">立即创建</el-button>-->
            <div @click="submitForm('formRef')" class="login_btn"></div>
          </el-form-item>
        </el-form>
        <div class="goback" @click="goback">
          <img src="@/assets/image/goback_icon.png" alt="">
          返回
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { passMD5, toMenuTree } from "../assets/js/common";
import { mapGetters } from "vuex";
import { checkPhone } from "../assets/js/rule";
export default {
  data () {
    return {
      formInfo: {
        phone: "",
        password: ""
      },
      loading: null,
      checked: false,
      defaultProps: {
        children: "children",
        label: "name"
      },
      formRules: {
        // phone: [
        //   { required: true, message: "请输入登陆名称", trigger: "blur" },
        //   { validator: checkPhone, trigger: "blur" }
        // ],
        // password: [{ required: true, message: "请输入密码", trigger: "blur" }]
      }
    };
  },
  computed: {
    ...mapGetters(["getUserLoginType", "getUserLoginType"]),
    loginTitle () {
      if (this.getUserLoginType == "1") {
        return "欢迎登录政府部门管理平台";
      } else if (this.getUserLoginType == "2") {
        return "欢迎登录企业管理平台";
      } else if (this.getUserLoginType == "3") {
        return "欢迎登录项目管理平台";
      } else {
        return "欢迎登录系统管理平台";
      }
    }
  },
  methods: {
    goback () {
      this.$router.push('/selectPlatform')
    },
    async loginIn () {
      this.loading = this.$loading({
        lock: true,
        text: 'Loading',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      });
      let obj = {
        type: this.getUserLoginType,
        phone: this.formInfo.phone,
        password: passMD5(this.formInfo.password)
      };
      const res = await this.axios.pcLogin(obj);

      if (res.code === 200) {
        this.$store.dispatch("setloginPath", this.$route.path);
        this.$store.dispatch("setAuthorization", res.data.token);
        this.$store.dispatch("setUserLoginInfo", res.data.userInfo);
        this.$store.dispatch("setUserLoginInfo", res.data.userInfo);
        this.$store.dispatch("setPortrait", res.data.userInfo.portrait);
        console.log("是否是初始密码", res.data)
        let isInitial = res.data.userInfo.isInitial;
        /*  是否是初始密码 0是初始密码，1不是  */
        if (isInitial == '0') {
          this.loading.close();
          this.$router.push('/mustChangePass')
        } else {

          sessionStorage.setItem("username", obj.phone);
          sessionStorage.setItem("password", this.formInfo.password);
          if (this.checked == true) {
            //传入账号名，密码，和保存天数3个参数
            this.setCookie(obj.phone, this.formInfo.password, 7);
          } else {
            console.log("清空Cookie");
            //清空Cookie
            this.clearCookie();
          }
          if (res.data.userInfo) {
            this.$store.dispatch("setUserLoginInfo", res.data.userInfo);
            this.$store.dispatch("set_entId", res.data.userInfo.groupId);
            // this.$store.dispatch("set_entId", 'd1c2426deb4443ddbc2e67f313ae42ca');
            if (obj.type === '4') {
              this.loading.close();
              this.$router.push("/systemManage/systemUser");
            } else {
              this.getMenuPermission(res.data.userInfo.id, res.data.userInfo.groupId)
            }
          }
        }


      } else {
        this.loading.close();
        this.$message.error(res.msg);
      }
    },
    submitForm (formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          this.loginIn();
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },


    //设置cookie
    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 =
        "password" + "=" + 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.formInfo.phone = arr2[1]; //保存到保存数据的地方
          } else if (arr2[0] == "password") {
            this.formInfo.password = arr2[1];
          }
        }
        this.checked = true;
      }
    },
    //清除cookie
    clearCookie: function () {
      this.setCookie("", "", -1); //修改2值都为空，天数为负1天就好了
    },
    /**
     * 项目端获取项目列表
     */
    async getProjectList (id, router) {
      let res = await this.axios.p_getProListByUserId({ userId: id });
      if (res.code === 200) {
        if (res.data.length > 0) {
          this.$store.dispatch("set_projectList", res.data);
          this.$store.dispatch("set_projectId", res.data[0].prjectId);
          this.$router.push(router);
        } else {
          this.$message.error('该账号暂无所属项目')
        }
      } else {
        this.$message.error(res.msg);
      }
    },
    /**
     * 获取菜单权限
     */
    async getMenuPermission (_userId, _groupId) {
      let res = await this.axios.c_findMenuListByUserId({ userId: _userId, groupId: _groupId, type: this.getUserLoginType });
      this.loading.close();
      if (res.code === 200) {
        if (!res.data) {
          this.$message.error('该用户暂无权限，请联系管理员配置')
          return
        }
        // 去重
        let hash = {};
        const newarr = res.data.reduce((preVal, curVal) => {
          hash[curVal.id] ? '' : hash[curVal.id] = true && preVal.push(curVal);
          return preVal
        }, [])
        let btnArr = [], menuArr = [];
        // 将返回的菜单分为菜单和按钮
        newarr.forEach(item => {
          if (item.buttonType == '1') {
            if (item.permission) {
              btnArr.push(item.permission)
            }
          } else {
            menuArr.push(item)
          }
        })
        let arr = toMenuTree(menuArr, 0, this.defaultProps.children);
        this.$store.dispatch('setPermissionMenu', arr);
        this.$store.dispatch('setPermissionBtn', btnArr);
        switch (this.getUserLoginType) {
          case "1":
            this.$message.info("正在开发中...");
            break;
          case "2":
            if (arr[0]) {
              this.$router.push(arr[0].href);
            } else {
              this.$message.error('暂无权限，请联系管理员配置权限')
            }
            break;
          case "3":
            if (arr[0]) {
              this.getProjectList(_userId, arr[1].href);
            } else {
              this.$message.error('暂无权限，请联系管理员配置权限')
            }
            break;
          case "4":
            // this.$router.push(arr[0].href);
            break;
        }
      } else {
        this.$message.error(res.msg);
      }
    },
  },

  created () {
    this.getCookie();
  }
};
</script>

<style lang='less'>
.login_bg {
  height: 100vh;
  width: 100%;
  position: relative;
  background: #44648c url("../assets/images/bg.png");
  background-size: 100% 100%;
  position: relative;
}

.login_wrap {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);

  .el-login {
    position: relative;
    width: 560px;
    height: 460px;
    border: 1px solid rgba(255, 255, 255, 1);
    background-color: rgba(255, 255, 255, 0.3);
    border-radius: 8px;

    .title {
      font-size: 28px;
      font-weight: 400;
      line-height: 37px;
      color: rgba(255, 255, 255, 1);
      margin: 42px 0 52px;
      text-align: center;
    }

    .form_wrap {
      width: 460px;
      margin: 0 auto;

      input::-webkit-input-placeholder {
        color: #ffffff;
      }

      .inputStyle {
        .el-input__inner {
          background: rgba(255, 255, 255, 0.45);
          height: 50px;
          box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.49);
          border: 1px solid rgba(255, 255, 255, 1);
          border-radius: 0;
          color: #ffffff;
          /*opacity:0.43;*/
        }
      }
    }

    .forget_wrap {
      overflow: hidden;

      .checkbox_btn {
        float: left;
        color: #ffffff;
      }

      .forget_btn {
        float: right;
        color: #ffffff;
      }
    }

    .login_btn {
      width: 460px;
      height: 80px;
      background: url("../assets/images/login_btn.png");
      cursor: pointer;
      background-size: contain;
      background-repeat: no-repeat;
    }
    .goback {
      position: absolute;
      right: 10px;
      bottom: 10px;
      color: #4d87f5;
      font-size: 18px;
      cursor: pointer;
      img {
        width: 12px;
        height: 14px;
      }
    }
  }
}
</style>