<template>
  <div id="app">
    <div id="nav">
      <router-link to="/">Home</router-link> |
      <router-link :to="{ name: 'Login' }">Login</router-link> |
      <!-- native 옵션을 줘야함 -->
      <router-link @click.native="logout" to="/accounts/logout">Logout</router-link>
    </div>
    <router-view @submit-login-data="login" />
  </div>
</template>

<script>
import axios from 'axios'
// axios.post(url, body, headers)

const SERVER_URL = 'http://localhost:8090'

export default {
  name: 'App',
  data() {
    return {
      isLoggedIn: false,
    }
  },
  methods: {
    setCookie(token) {
      this.$cookies.set('auth-token', token)
      this.isLoggedIn = true // Cookie
    },

    login(loginData) {
      axios.post(SERVER_URL + '/rest-auth/login/', loginData) // 2번째 인자 body
        .then(res => {
          this.setCookie(res.data.key) // npm i vue-cookies
          this.$router.push({ name: 'Home' }) // 로그인후 home 으로 보냄
        })
        .catch(err => console.log(err.response.data))
    },

    logout() {
      const requestHeaders = {
        header: {
          'Authorization': `Token ${this.$cookies.get('auth-token')}`
        }
      }

      axios.post(SERVER_URL + '/rest-auth/logout/', null, requestHeaders)
        .then(res => {
          console.log(res.data)
          this.$cookies.remove('auth-token')
          this.isLoggedIn = false
          this.$router.push({ name: 'Home' })
        })
        .catch(err => console.log(err.response))
    },
  }
}
</script>