SaaS-DataScreen/src/views/login/index.vue

<!--
 * @Author: WangQiBiao
 * @Date: 2019-10-08 15:33:28
 * @LastEditors: mozhuangru
 * @LastEditTime: 2019-10-09 11:14:28
 * @Description: 登录
 -->
<template>
  <div class="login">
    <el-form class="login-form" :model="formRule" :rules="rules" ref="formRule">
      <h1 class="login-form-label">绘享云大数据展示平台</h1>
      <el-form-item prop="user">
        <el-input v-model="formRule.user" placeholder="请输入用户名"></el-input>
      </el-form-item>
      <el-form-item prop="pwd">
        <el-input v-model="formRule.pwd" show-password placeholder="请输入登录密码"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" v-loading="isLoading" style="width: 100%" @click="onSubmit">登录</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
export default {
  data () {
    return {
      formRule: {
        user: '',
        pwd: ''
      },
      rules: {
        user: [
          { required: true, message: '请输入账号' }
        ],
        pwd: [
          { required: true, message: '请输入密码' }
        ]
      },
      whiteUser: ['wisdomcity', 'wisdomcity2019'], // 白名单账号
      isLoading: false
    }
  },
  methods: {
    onSubmit () {
      this.$refs['formRule'].validate((valid) => {
        if (valid) {
          this.isLoading = true
          if (this.whiteUser.includes(this.formRule.user)) {
            sessionStorage.setItem('token', 'fdsfas41234123fdsf4132423vsvd134')
            setTimeout(() => {
              this.isLoading = false
              this.$router.push({ path: '/index' })
            }, 1)
          } else {
            this.isLoading = false
            this.$message({
              message: `您输入的账号或者密码有误，请重新输入正确的账号和密码！`,
              type: 'warning'
            })
          }
        } else {
          return false
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
@import "./index.scss";
</style>