登錄功能實現

新建登錄頁面

在 src/views/auth 新建 Login.vue 文件，復制貼入以下代碼：

src/views/auth/Login.vue

<template>
  <div class="row">
    <div class="col-md-4 col-md-offset-4 floating-box">
      <Message :show.sync="msgShow" :type="msgType" :msg="msg"/>

      <div class="panel panel-default">
        <div class="panel-heading">
          <h3 class="panel-title">請登錄</h3>
        </div>

        <div class="panel-body" data-validator-form>
          <div class="form-group">
            <label class="control-label">用戶名</label>
            <input v-model.trim="username" v-validator.required="{ title: '用戶名' }" type="text" class="form-control" placeholder="請填寫用戶名">
          </div>
          <div class="form-group">
            <label class="control-label">密碼</label>
            <input v-model.trim="password" id="password" v-validator.required="{ title: '密碼' }" type="password" class="form-control" placeholder="請填寫密碼">
          </div>
          <br>
          <button @click="login" type="submit" class="btn btn-lg btn-success btn-block">
            <i class="fa fa-btn fa-sign-in"></i> 登錄
          </button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Login',
  data() {
    return {
      username: '', // 用戶名
      password: '', // 密碼
      msg: '', // 消息
      msgType: '', // 消息類型
      msgShow: false // 是否顯示消息，默認不顯示
    }
  },
  methods: {
    login(e) {
      this.$nextTick(() => {
        const target = e.target.type === 'submit' ? e.target : e.target.parentElement

        if (target.canSubmit) {
          this.submit()
        }
      })
    },
    submit() {
      const user = {
        name: this.username,
        password: this.password
      }
      const localUser = this.$store.state.user

      if (localUser) {
        if (localUser.name !== user.name || localUser.password !== user.password) {
          this.showMsg('用戶名或密碼不正確')
        } else {
          this.$store.dispatch('login')
        }
      } else {
        this.showMsg('不存在該用戶')
      }
    },
    showMsg(msg, type = 'warning') {
      this.msg = msg
      this.msgType = type
      this.msgShow = false

      this.$nextTick(() => {
        this.msgShow = true
      })
    }
  }
}
</script>

<style scoped>

</style>

// 1.驗證：填寫input中的驗證規則:驗證時候要在panel-body上寫data-validator-form屬性
//2.寫login時，看是否是提交按鈕