aboutsummaryrefslogtreecommitdiff
path: root/src
diff options
context:
space:
mode:
Diffstat (limited to 'src')
-rw-r--r--src/components/navbar.vue6
-rw-r--r--src/main.ts43
-rw-r--r--src/router/index.ts4
-rw-r--r--src/views/LogIn.vue32
-rw-r--r--src/views/Register.vue21
5 files changed, 68 insertions, 38 deletions
diff --git a/src/components/navbar.vue b/src/components/navbar.vue
index e6205c8..7491ea9 100644
--- a/src/components/navbar.vue
+++ b/src/components/navbar.vue
@@ -1,6 +1,6 @@
<script setup lang="ts">
-import { watch, ref } from "vue"
-import { RouterLink, useRoute } from "vue-router"
+import { watch, ref } from 'vue'
+import { RouterLink, useRoute } from 'vue-router'
const requiresAuth = ref(true)
const route = useRoute()
@@ -9,7 +9,7 @@ watch(
async () => {
requiresAuth.value = route.meta.isAuth
}
-);
+)
</script>
<template>
diff --git a/src/main.ts b/src/main.ts
index f6d3ea7..2886300 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -9,9 +9,50 @@ import * as bootstrap from 'bootstrap'
import 'vue-toast-notification/dist/theme-sugar.css'
axios.defaults.baseURL = '/api'
-axios.defaults.headers.common['Authorization'] = `Bearer ${localStorage.getItem('authToken')}`
axios.defaults.headers.post['Content-Type'] = 'application/json'
+axios.interceptors.request.use(
+ (config) => {
+ const token = localStorage.getItem('authToken')
+ if (token) {
+ config.headers['Authorization'] = 'Bearer ' + token
+ }
+ return config
+ },
+ (error) => {
+ return Promise.reject(error)
+ }
+)
+
+axios.interceptors.response.use(
+ (res) => {
+ return res;
+ },
+ async (err) => {
+ const originalConfig = err.config;
+
+ if (originalConfig.url !== "/auth/signin" && err.response) {
+ if (err.response.status === 401 && !originalConfig._retry) {
+ originalConfig._retry = true;
+
+ try {
+ const rs = await axios.post("/auth/refresh", {
+ RefreshToken: localStorage.getItem("refToken")
+ });
+
+ localStorage.setItem("authToken", rs.data.auth_token)
+
+ return axios(originalConfig);
+ } catch (_error) {
+ return Promise.reject(_error);
+ }
+ }
+ }
+
+ return Promise.reject(err);
+ }
+);
+
const app = createApp(App)
app.use(router)
diff --git a/src/router/index.ts b/src/router/index.ts
index af8e2c5..568bad8 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -64,8 +64,8 @@ const router = createRouter({
})
router.beforeEach((to, _, next) => {
- if (to.meta.isAuth && !localStorage.getItem("authToken")) {
- next("/login?redirected=true")
+ if (to.meta.isAuth && !localStorage.getItem('authToken')) {
+ next('/login?redirected=true')
} else {
next()
}
diff --git a/src/views/LogIn.vue b/src/views/LogIn.vue
index fb9bdcd..77999f2 100644
--- a/src/views/LogIn.vue
+++ b/src/views/LogIn.vue
@@ -1,7 +1,7 @@
<script setup lang="ts">
-import { ref, toRaw } from "vue"
+import { ref, toRaw } from 'vue'
import { RouterLink, useRouter } from 'vue-router'
-import axios from "axios"
+import axios from 'axios'
import { useToast } from 'vue-toast-notification'
const toast = useToast({
@@ -11,8 +11,8 @@ const toast = useToast({
const router = useRouter()
const isLoading = ref(false)
-const email = ref("")
-const password = ref("")
+const email = ref('')
+const password = ref('')
const login = async (e) => {
e.preventDefault()
@@ -20,25 +20,25 @@ const login = async (e) => {
try {
const res = await axios.post('/auth/signin', {
- "accountname": toRaw(email.value),
- "password": toRaw(password.value),
- "method": "email"
+ accountname: toRaw(email.value),
+ password: toRaw(password.value),
+ method: 'email'
})
- localStorage.setItem("authToken", res.data.auth_token)
- localStorage.setItem("refToken", res.data.refresh_token)
+ localStorage.setItem('authToken', res.data.auth_token)
+ localStorage.setItem('refToken', res.data.refresh_token)
toast.default(`Welcome, ${res.data.data.Username}`)
- router.push({ path: "/" })
+ router.push({ path: '/' })
} catch (err) {
const statusCode = err.request.status
- switch(statusCode) {
+ switch (statusCode) {
case 401:
toast.error('Password is incorrect')
- break;
+ break
case 404:
toast.error('User does not exist')
- break;
+ break
default:
toast.error('An unhandled exception occoured. Please check logs')
}
@@ -116,7 +116,11 @@ const login = async (e) => {
</div>
-->
- <button type="submit" class="btn btn-primary btn-block mb-4" :class="{ disabled: isLoading }">
+ <button
+ type="submit"
+ class="btn btn-primary btn-block mb-4"
+ :class="{ disabled: isLoading }"
+ >
Sign In
<div v-if="isLoading" class="spinner-border spinner-border-sm ms-1" role="status">
<span class="sr-only"></span>
diff --git a/src/views/Register.vue b/src/views/Register.vue
index b96a0d1..9c3089a 100644
--- a/src/views/Register.vue
+++ b/src/views/Register.vue
@@ -34,32 +34,17 @@ import { RouterLink } from 'vue-router'
<div>
<form>
<div class="form-floating mb-4">
- <input
- id="login-username-input"
- type="text"
- class="form-control"
- placeholder=""
- />
+ <input id="login-username-input" type="text" class="form-control" placeholder="" />
<label for="login-username-input">Username</label>
</div>
<div class="form-floating mb-4">
- <input
- id="login-email-input"
- type="text"
- class="form-control"
- placeholder=""
- />
+ <input id="login-email-input" type="text" class="form-control" placeholder="" />
<label for="login-email-input">E-Mail</label>
</div>
<div class="form-floating mb-4">
- <input
- id="login-password-input"
- type="password"
- class="form-control"
- placeholder=""
- />
+ <input id="login-password-input" type="password" class="form-control" placeholder="" />
<label for="login-password-input">Password</label>
</div>