<template> <div class="container"> <h1>Please login to see the secret content</h1> <form v-if="!$store.state.authUser" @submit.prevent="login"> <p class="error" v-if="formError">{{ formError }}</p> <p><i>To login, use <b>demo</b> as username and <b>demo</b> as password.</i></p> <p>Username: <input type="text" v-model="formUsername" name="username" /></p> <p>Password: <input type="password" v-model="formPassword" name="password" /></p> <button type="submit">Login</button> </form> <div v-else> Hello {{ $store.state.authUser.username }}! <pre>I am the secret content, I am shown only when the use is connected.</pre> <p><i>You can also refresh this page, you'll still be connected!</i></p> <button @click="logout">Logout</button> </div> <p><router-link to="/secret">Super secret page</router-link></p> </div> </template> <script> export default { data () { return { formError: null, formUsername: '', formPassword: '' } }, methods: { login () { this.$store.dispatch('login', { username: this.formUsername, password: this.formPassword }) .then(() => { this.formUsername = '' this.formPassword = '' this.formError = null }) .catch((e) => { this.formError = e.message }) }, logout () { this.$store.dispatch('logout') } } } </script> <style> .container { padding: 100px; } .error { color: red; } </style>