tangguo_admin/src/views/login/index.vue

<template>
  <div class="login-main">
    <div class="black-bg-box" v-loading="pfloading">
      <div class="title">糖果短剧后台管理系统</div>
      <div class="login-form-box">
        <p>登录</p>
        <el-form
          ref="form"
          :model="form"
          :rules="rules"
          label-width="80px"
          class="login-from"
        >
          <el-form-item label="账号:" prop="name">
            <el-input v-model="form.name"></el-input>
          </el-form-item>
          <el-form-item label="密 码:" class="password" prop="passWord">
            <el-input
              v-model="form.passWord"
              show-password
              @keyup.native.enter="submitForm"
            ></el-input>
          </el-form-item>
          <el-form-item style="margin-top: 15px">
            <el-checkbox v-model="checked">记住密码？</el-checkbox>
          </el-form-item>
          <el-button
            :loading="loading"
            type="primary"
            class="login-in"
            @click="submitForm"
            >登录</el-button
          >
        </el-form>
      </div>
    </div>
    <google-verifcation
      ref="google"
      @handleVerify="saveUserInfo"
    ></google-verifcation>
  </div>
</template>
<script>
import API from "@/api";
import local from "@/utils/localStroage.js";
import { safeJsonParse } from "@/utils/safeJsonParse";
import GoogleVerifcation from "./components/google-verification";
export default {
  name: "login",
  data() {
    return {
      form: {
        name: "",
        passWord: ""
      },
      QRcode: "",
      rules: {
        name: [{ required: true, message: "请输入名称", trigger: "blur" }],
        passWord: [{ required: true, message: "请输入密码", trigger: "blur" }]
      },
      checked: false,
      loading: false,
      pfloading: false
    };
  },
  components: {
    GoogleVerifcation
  },
  created() {
    // 从localStroage读取用户登录信息，存在则自动填充密码
    let loginInfo = local.get("loginInfo");
    if (loginInfo) {
      this.checked = true;
      this.form = loginInfo;
    } else {
      let n = this.getQueryString("n");
      let p = this.getQueryString("p");
      if(n && p){
        this.pfloading = true;
        this.ssoLogin(n, p);
      }
    }
  },
  methods: {
    /**
     *  截取url参数
     * @param {*} name 截取url参数名称
     * @returns
     */
    getQueryString(name) {
      let reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
      let r = window.location.search.substring(1).match(reg);
      if (r != null) {
          return decodeURIComponent(r[2]);
      }
      return null;
    },
    // 表单验证提交
    submitForm() {
      this.$refs.form.validate(valid => {
        if (valid) {
          this.flag = true;
          this.firstLogin();
        } else {
          return false;
        }
      });
    },
    // 登录保存登录状态到本地存储器
    firstLogin() {
      let params = Object.assign({}, this.form);
      API.login(params)
        .then(res => {
          if (res.code === 200) {
            let QRcode = res.data.qrCodePNG;
            this.QRcode = QRcode ? "data:image/png;base64," + QRcode : "";
            this.googleValidate();
          } else {
            this.$message.error("账号或密码错误，请重新登陆");
          }
        })
        .catch(err => {
          this.$message.error(err);
        });
    },
    // sso登录
    ssoLogin(n, p) {
      let params = {
        name: n,
        passWord: p
      };
      API.slogin(params).then(res => {
        this.pfloading = false;
        if(res.code == 200 && res.data){
          this.saveUserInfo(res.data);
        }
        let hostname =  window.location.origin +  window.location.pathname;
        window.history.replaceState(null,null,hostname);
      }).catch(err => {
        this.pfloading = false;
        let hostname =  window.location.origin +  window.location.pathname;
        window.history.replaceState(null,null,hostname);
        this.$message.error(err);
      });
    },
    // 谷歌二次验证
    googleValidate() {
      this.$refs.google.open(Object.assign(this.form, { QRcode: this.QRcode }));
    },
    // 记住密码
    saveUserInfo(userInfo) {
      if (this.checked) {
        local.set("loginInfo", this.form);
      } else {
        local.remove("loginInfo");
      }
      // if (userInfo.authJson === '') {
      //   this.$message.error('该用户没有登陆权限，请让管理员添加页面权限')
      //   return false
      // }
      // 将获取的权限首先存入localstorage
      let permeList = safeJsonParse(userInfo.authJson, []);
      if (!Array.isArray(permeList)) {
        permeList = [];
      }
      // eslint-disable-next-line no-console
      console.log(permeList);
      local.set("role", permeList);
      // 保存用户信息
      local.set("userInfo", userInfo);
      // 刷新动态权限路由,权限路由从localstorage中获取
      this.$store.dispatch("refreshRouter");
      // 登录成功过后重定向到欢迎页面
      this.$router.push({
        path: "/welcome"
      });
    }
  }
};
</script>
<style lang='scss' scoped>
.login-main {
  width: 100%;
  height: 100%;
  background: #0e0d1f;
  background-size: 100% 100%;
  overflow: hidden;
  position: relative;
  .black-bg-box {
    width: 100%;
    height: 100%;
    overflow: hidden;
  }
  .title {
    color: white;
    font-size: 52px;
    font-weight: bold;
    text-align: center;
    margin-top: 150px;
    letter-spacing: 5px;
  }
  .login-form-box {
    width: 400px;
    height: 300px;
    background: rgba(255, 255, 255, 1);
    margin: 0 auto;
    border-radius: 5px;
    margin-top: 80px;
  }
  p {
    color: #333;
    text-align: center;
    line-height: 40px;
  }
  .login-from {
    // text-align: center;
    margin-top: 20px;
    .el-input {
      width: 300px;
    }
    .password {
      margin-bottom: 0px;
    }
    .el-checkbox {
      font-weight: normal;
    }
    .login-in {
      width: 75%;
      margin-left: 15%;
    }
  }
}
</style>