登录页面111

<template>
  <div class="login_context">
    <!-- 登录页面 -->
    <el-card class="card_login">
      <div class="title">
        资料整编及数据处理软件
      </div>
      <div></div>
      <el-form ref="loginForm" :model="loginForm" :rules="loginRules" class="loginForm">
        <el-form-item prop="username">
          <el-input class="loginInput" auto-complete="off" placeholder="用户名" v-model="loginForm.username" @blur="trimInput('username')">
            <svg-icon slot="prefix" icon-class="user" class="el-input__icon input-icon" />
          </el-input>
        </el-form-item>

        <el-form-item prop="password">
          <el-input type="password" class="loginInput" auto-complete="off" placeholder="密码" v-model="loginForm.password" @blur="trimInput('password')">
            <svg-icon slot="prefix" icon-class="password" class="el-input__icon input-icon" />
          </el-input>
        </el-form-item>
      </el-form>
      <el-checkbox v-model="loginForm.rememberMe" style="float:left;">记住密码</el-checkbox>
      <a class="changePwd" href="#" @click="ForgetPass">忘记密码？</a>
      <el-button class="login_btn" @click="goLogin">登录</el-button>
      <div class="message">
        <span>如页面不能正常显示,请尝试下载其他浏览器 : </span><br />
        <a href="https://ie.sogou.com/" target="_blank"><b> * </b>搜狗浏览器</a>
        <a href="https://browser.360.cn/ee/" target="_blank"><b> * </b>360浏览器</a>
        <a href="https://www.google.cn/intl/zh-CN/chrome/" target="_blank"><b> * </b>谷歌浏览器</a>
        <a href="http://www.firefox.com.cn/" target="_blank"><b> * </b>火狐浏览器</a>
      </div>

    </el-card>
    <el-dialog width="500px" titleter="" :visible.sync="dialogFormVisibles">
      <span style="font-size:18px;text-align:left;color:#da485d;margin-bottom:10px" colspan="10">忘记密码请联系管理员找回</span>
      <div slot="footer" class="tanchuang">
        <el-button type="primary" @click="dialogFormVisibles = false">关闭</el-button>
        <!-- <el-button type="primary" @click="ForgetPa()">确 定</el-button> -->
      </div>
    </el-dialog>
  </div>
</template>

<script>
import Cookies from "js-cookie";
import { decrypt, encrypt } from "@/utils/jsencrypt";
import {login} from '@/api/login';
import {setToken} from '@/utils/auth'

export default {
  name: "Login",
  components: {},
  data() {
    return {
      loginForm: {
        username: "", //用户
        password: "", //密码
        rememberMe: false,
      },
      dialogFormVisibles: false,
      loginRules: {
        username: [
          { required: true, trigger: "blur", message: "用户名不能为空" },
          // { min: 6, max: 16, message: "长度在 8 到 30 个字符" },
        ],
        password: [
          { required: true, trigger: "blur", message: "密码不能为空" },
          { min: 6, max: 16, message: "长度在 8 到 16 个字符" },
        ],
        // code: [{ required: true, trigger: "change", message: "验证码不能为空" }]
      },
    };
  },
  created() {
    this.dataEnum.setLocalStorageItem(this.dataEnum.dingShiKey,[]);
    this.getCookie();
  },
  computed: {},
  mounted() { },
  methods: {
    trimInput(field) {
      this.loginForm[field] = this.loginForm[field].trim();
    },
    getCookie() {
      const username = Cookies.get("username");
      const password = Cookies.get("password");
      const rememberMe = Cookies.get("rememberMe");
      this.loginForm = {
        username: username === undefined ? this.loginForm.username : username,
        password:
          password === undefined ? this.loginForm.password : decrypt(password),
        rememberMe: rememberMe === undefined ? false : Boolean(rememberMe)
      };
    },
    setCookie() {
      Cookies.set("username", this.loginForm.username, { expires: 30 });
      if (this.loginForm.rememberMe) {
        Cookies.set("password", encrypt(this.loginForm.password), {
          expires: 30
        });
        Cookies.set("rememberMe", this.loginForm.rememberMe, {
          expires: 30
        });
      } else {
        Cookies.remove("password");
        Cookies.remove("rememberMe");
      }
    },
    // 登录跳转
    goLogin() {
      this.$refs.loginForm.validate(valid => {
        if (valid) {
          this.dataEnum.openFullScreen();
          login(this.loginForm.username, this.loginForm.password).then((res) => {
            console.log(res,"11");

            //console.log("登录成功");
            if (res.code == 200) {
              this.setCookie();
              setToken(res.data.expires, res.data.token);
              this.dataEnum.closeFullScreen();
              this.$message.success('登录成功')
              this.$router.push({ path: "/load" });
            }
          }).catch((error)=>{
            this.dataEnum.closeFullScreen();
            // console.log(error,"222");
            this.$message.error(error.msg);
          })

        }
      });
    },
    // 忘记密码
    ForgetPass() {
      this.dialogFormVisibles = true;
    },
  },
};
</script>

<style lang="less" scoped>
.login_context {
  // src\assets\login\login_bj.jpeg
  background: url("../assets/login/login_bj.jpeg") no-repeat 100% 100%;
  height: 100%;
  width: 100%;
  background-size: 100% 100%;
  min-width: 22.5rem;
  position: relative;

  .card_login {
    border-radius: 5px;
    text-align: center;
    position: absolute;
    left: 50%;
    top: 50%;
    background-color: rgba(255, 255, 255, 0.5);
    box-shadow: 1px 0 20px rgba(0, 0, 0, 0.08);
    border-radius: 3px;
    transform: translate(-50%, -50%);
    // padding: 5px 10px;
    // min-width: 28rem;
    width: 500px;
    // height: 400px;
    // min-width: 29.625rem;
    margin-bottom: 0 !important;

    .title {
      margin-bottom: 30px;
      font-size: 35px;
      font-weight: 800;
      margin-top: 30px;
    }

    .loginForm {
      text-align: right;

      /deep/.el-form-item {
        .el-form-item__label {
          height: 45px;
          line-height: 45px;
        }

        .loginInput {
          input {
            background: rgba(255, 255, 255, 0.5);
            padding: 10px 15px;
            // margin: 10px 0;
            // margin-top: 10px;
            height: 45px;
            line-height: 1;
            padding-left: 52px;
          }

          .input-icon {
            // background-color: #f8f9fa;
            border-radius: 5px 0 0 5px;
            height: 43px;
            margin: 1px 0;
            margin-left: -5px;
            padding: 10px;
            line-height: 1;
            width: 40px;
            color: #4F5467;
            border-right: 1px solid #e9ecef;
            // margin-left: 2px;
          }
        }
      }
    }

    .login_title {
      border-bottom: 2px solid #fff;
      text-align: center;
      font-size: 16px;
      padding-bottom: 10px;
    }

    .input_box {
      position: relative;

      .inco_text {
        padding: 5px;
        position: absolute;
        background-color: #f8f9fa;
        width: 30px;
        height: 30px;
        border-radius: 3px 0 0 3px;
        left: 1px;
        border-right: 1px solid #e9ecef;
        top: 50%;
        transform: translateY(-50%);
      }
    }

    .userinput {
      margin-top: 20px;
      // margin-bottom: 15px !important;
    }

    .input1 {
      padding-left: 40px;
      border: 1px solid #e9ecef;
      margin-bottom: 0;
      margin-top: 0;
    }

    .form-control {
      font-size: 12px;
    }

    .login_btn {
      color: #fff;
      width: 100%;
      height: 45px;
      background-color: #0346ff;
      border-color: #0041f5;
      padding: 0.5rem 0;
      font-size: 1rem;
      margin: 15px 0;
      // float: right;
      width: 100%;
    }

    .changePwd {
      // margin: 10px 0;
      margin-bottom: 10px;
      display: block;
      text-align: right;
      width: 90px;
      float: right;
      font-size: 14px;
    }

    .tanchuang button {
      margin-right: 120px;
    }

    .message {
      padding: 10px 0 0 0;
      line-height: 25px;
      text-align: left;
      font-size: 14px;

      a {
        color: #0041f5;
        margin-right: 10px;
      }
    }
  }
}</style>

//jsencrypt.js
import JSEncrypt from 'jsencrypt/bin/jsencrypt'

// 密钥对生成 http://web.chacuo.net/netrsakeypair

const publicKey = 'MFwwDQYJKoZIhvcNAQEBBQADSwAwSAJBANL378k3RiZHWx5AfJqdH9xRNBmD9wGD\n' +
  '2iRe41HdTNF8RUhNnHit5NpMNtGL0NPTSSpPjjI1kJfVorRvaQerUgkCAwEAAQ=='

const privateKey = 'MIIBUwIBADANBgkqhkiG9w0BAQEFAASCAT0wggE5AgEAAkEA0vfvyTdGJkdbHkB8\n' +
  'mp0f3FE0GYP3AYPaJF7jUd1M0XxFSE2ceK3k2kw20YvQ09NJKk+OMjWQl9WitG9p\n' +
  'B6tSCQIDAQABAkA2SimBrWC2/wvauBuYqjCFwLvYiRYqZKThUS3MZlebXJiLB+Ue\n' +
  '/gUifAAKIg1avttUZsHBHrop4qfJCwAI0+YRAiEA+W3NK/RaXtnRqmoUUkb59zsZ\n' +
  'UBLpvZgQPfj1MhyHDz0CIQDYhsAhPJ3mgS64NbUZmGWuuNKp5coY2GIj/zYDMJp6\n' +
  'vQIgUueLFXv/eZ1ekgz2Oi67MNCk5jeTF2BurZqNLR3MSmUCIFT3Q6uHMtsB9Eha\n' +
  '4u7hS31tj1UWE+D+ADzp59MGnoftAiBeHT7gDMuqeJHPL4b+kC+gzV4FGTfhR9q3\n' +
  'tTbklZkD2A=='

// 加密
export function encrypt(txt) {
  const encryptor = new JSEncrypt()
  encryptor.setPublicKey(publicKey) // 设置公钥
  return encryptor.encrypt(txt) // 对需要加密的数据进行加密
}

// 解密
export function decrypt(txt) {
  const encryptor = new JSEncrypt()
  encryptor.setPrivateKey(privateKey)
  return encryptor.decrypt(txt)
}

//auth.js
import Cookies from 'js-cookie'

const TokenKey = 'hwgc_token'

export function getToken() {
  return Cookies.get(TokenKey)
}

export function setToken(expires,token) {
  return Cookies.set(TokenKey,token,expires)
}

export function removeToken() {
  return Cookies.remove(TokenKey)
}