85 lines
2.1 KiB
Vue
85 lines
2.1 KiB
Vue
<template>
|
|
<div>
|
|
<h1>Login Form</h1>
|
|
<div>Username: <input v-model="loginFormData.username" /></div>
|
|
<div>Password: <input v-model="loginFormData.password" /></div>
|
|
<button @click="login">LOGIN</button>
|
|
<button @click="reset">RESET</button>
|
|
</div>
|
|
<div v-if="token">
|
|
<h2>API Request Form</h2>
|
|
<div>
|
|
Request: <code>GET {{ api }}</code>/ <input v-model="loginFormData.password" />
|
|
</div>
|
|
<div>Token: {{ token }}</div>
|
|
<button @click="sendRequest">SEND REQUEST</button>
|
|
</div>
|
|
<div v-if="messages.length > 0">
|
|
<h2>Messages</h2>
|
|
<div v-for="message in messages">
|
|
<pre>{{ message }}</pre>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<script setup>
|
|
const config = useRuntimeConfig();
|
|
const api = config.public.apiBase;
|
|
const loginFormData = reactive({
|
|
username: null,
|
|
password: null,
|
|
});
|
|
const token = ref(null);
|
|
const messages = ref([]);
|
|
async function login() {
|
|
reset();
|
|
try {
|
|
await $fetch(`${api}/auth/login`, {
|
|
method: "POST",
|
|
headers: {
|
|
"Content-Type": "application/json",
|
|
Accept: "application/json",
|
|
},
|
|
body: loginFormData,
|
|
onResponse({ request, response, options }) {
|
|
messages.value.push({
|
|
method: options.method,
|
|
request: request,
|
|
status: response.status,
|
|
statusText: response.statusText,
|
|
payload: response._data,
|
|
});
|
|
if (response.status == 200) token.value = response._data;
|
|
},
|
|
});
|
|
} catch (e) {
|
|
console.error("login request failed: ", e);
|
|
}
|
|
}
|
|
function reset() {
|
|
token.value = null;
|
|
messages.value = [];
|
|
}
|
|
async function sendRequest() {
|
|
try {
|
|
await $fetch(`${api}/`, {
|
|
method: "GET",
|
|
headers: {
|
|
Accept: "application/json",
|
|
Authorization: `Bearer ${token.value}`,
|
|
},
|
|
onResponse({ request, response, options }) {
|
|
messages.value.push({
|
|
method: options.method,
|
|
request: request,
|
|
status: response.status,
|
|
statusText: response.statusText,
|
|
payload: response._data,
|
|
});
|
|
},
|
|
});
|
|
} catch (e) {
|
|
console.error("api request failed: ", e);
|
|
}
|
|
}
|
|
</script>
|