Nuxt/examples/auth-routes/pages/index.vue

73 lines
1.6 KiB
Vue
Raw Normal View History

2016-12-04 18:16:10 +00:00
<template>
<div class="container">
<h1>Please login to see the secret content</h1>
2016-12-07 16:03:52 +00:00
<form v-if="!$store.state.authUser" @submit.prevent="login">
<p v-if="formError" class="error">
{{ formError }}
</p>
2016-12-04 18:16:10 +00:00
<p><i>To login, use <b>demo</b> as username and <b>demo</b> as password.</i></p>
<p>Username: <input v-model="formUsername" type="text" name="username"></p>
<p>Password: <input v-model="formPassword" type="password" name="password"></p>
<button type="submit">
Login
</button>
2016-12-04 18:16:10 +00:00
</form>
<div v-else>
2016-12-07 16:03:52 +00:00
Hello {{ $store.state.authUser.username }}!
2019-05-03 16:25:50 +00:00
<pre>I am the secret content, I am shown only when the user is connected.</pre>
2016-12-07 16:03:52 +00:00
<p><i>You can also refresh this page, you'll still be connected!</i></p>
<button @click="logout">
Logout
</button>
2016-12-04 18:16:10 +00:00
</div>
<p>
<NuxtLink to="/secret">
Super secret page
</NuxtLink>
</p>
2016-12-04 18:16:10 +00:00
</div>
</template>
<script>
export default {
2017-10-31 13:43:55 +00:00
data() {
2016-12-04 18:16:10 +00:00
return {
formError: null,
formUsername: '',
formPassword: ''
}
},
methods: {
2017-10-31 13:43:55 +00:00
async login() {
try {
await this.$store.dispatch('login', {
username: this.formUsername,
password: this.formPassword
})
2016-12-07 16:03:52 +00:00
this.formUsername = ''
this.formPassword = ''
this.formError = null
2017-10-31 13:43:55 +00:00
} catch (e) {
2016-12-07 16:03:52 +00:00
this.formError = e.message
}
2016-12-07 16:03:52 +00:00
},
2017-10-31 13:43:55 +00:00
async logout() {
try {
await this.$store.dispatch('logout')
} catch (e) {
this.formError = e.message
}
2016-12-04 18:16:10 +00:00
}
}
}
</script>
<style>
.container {
padding: 100px;
}
.error {
color: red;
}
</style>