app.vue

<template>
    <div class="todoListContainer">
        <div class="heading">
            <h2 id="title">Todo List</h2>
            <add-item-form v-on:reloadlist="getList()" />
        </div>
        <list-view
            :items="items"
            v-on:reloadlist="getList()"
            />
        <div id="loginform" v-bind:class="[ isLogin ? 'hide' : 'show' ]">
            <form v-on:submit.prevent="loginUser">
                <p class="h4 text-center mb-4">Sign in</p>
                <div class="grey-text">
                    <input placeholder="email" id="email" type="email" ref="email"/>
                    <input placeholder="password" id="password" type="password" ref="password"/>
                </div>
                <div class="text-center">
                    <button>Login</button>
                </div>
            </form>
        </div>
    </div>

</template>
<script>
import addItemForm from "./addItemForm"
import listView from "./listView"
export default {
    components: {
        addItemForm,
        listView
    },
    data: function () {
        return {
            items: [],
            isLogin: false,
            token: ''
        }
    },
    methods: {
        getList () {
            let headers = {
                    'headers': {
                        'Content-Type': 'application/json;charset=utf-8',
                        'Accept': 'application/json',
                        'Authorization': 'Bearer ' + localStorage.token
                    }
                };
            axios.get('/api/items', headers)
            .then(response => {
                this.items = response.data
            })
            .catch( error => {
                console.log( error )
            })
        },
        loginUser() {
            let headers = {
                'headers': {
                    'Content-Type': 'application/json;charset=utf-8',
                    'Accept': 'application/json'
                }
            };
            var email = this.$refs.email.value;
            var password = this.$refs.password.value;
            axios.post('/api/login', {
                email: email,
                password: password
            }, headers)
            .then(response => {
                let user = response.data;
                let access_token = user.access_token;
                localStorage.token = access_token;
                console.log(localStorage.token);
                this.getList();
            })
            .catch ((err) => {
                console.log (err)
            })
        }
    },
    created() {
        if (localStorage.token) {
            this.isLogin = true;
            this.token = localStorage.access_token;
            this.getList();
        } else {
            this.isLogin = false;
            this.token = '';
        }
    }
}
</script>
<style scoped>
    .todoListContainer {
        width: 350px;
        margin: auto;
    }
    .heading {
        background: #e6e6e6;
        padding: 10px;
    }
    #title {
        text-align: center;
    }
    .hide { display: none; }
    .show { display: block; }
</style>