###### tags: `Vue` `店商網頁`
{%hackmd BJrTq20hE %}
# Vue店商網頁-後台登入
身為一個店商網頁，有一個登入功能是很正常的。

## 那要如何實現呢?
1.要有登入的介面，可以輸入帳號與密碼。~~這是廢話~~
2.把帳號與密碼post出去。
3.接收到token把token存在cookie內，這樣子在一定的時間內就不用重複登入。

## 範例說明
下方的html，就是用來接收帳號與密碼，還有送出帳號與密碼。
重點在JS的第15行 document.cookie = \`myHextoken= ${res.data.token}; expires= ${new Date(res.data.expired)}\`把token存在myHextoken，expires為使用期限使用new Date()轉換為時間格時，res.data.expired)為數字。

html

<template>
    <div class="container">
      <div class="row">
            <div class="mx-auto col-4">
                <div class="card my-3">
                    <div class="card-body">
                        <div class="form-group py-2">
                            <label for="account">帳號</label>
                            <input type="mail" id="account" class="form-control" placeholder="請輸入帳號"
                                v-model="user.username">
                        </div>
                        <div class="form-group py-2">
                            <label for="password">密碼</label>
                            <input type="password" id="password" class="form-control" placeholder="請輸入密碼"
                                v-model="user.password">
                        </div>
                    </div>
                    <button class="btn btn-primary align-self-end me-3 mb-3" type="button" @click="login">登入</button>
                </div>
            </div>
        </div>
    </div>
</template>

JS

export default {
  data () {
    return {
      user: {
        username: '',
        password: ''
      }
    }
  },
  methods: {
    login () {
      if (this.user.username !== '' && this.user.password !== '') {
        this.$http.post(`${process.env.VUE_APP_API}/admin/signin`, this.user).then((res) => {
          // 把token存到cookie
          document.cookie = `myHextoken= ${res.data.token}; expires= ${new Date(res.data.expired)}`
          // 轉跳頁面到產品資料頁
          this.$router.push('/admin/adminProducts')
        }).catch((err) => {
          alert(err.response.data.message)
        })
      } else { alert('請輸入帳號與密碼') }
    }
  }
}