diff options
| -rw-r--r-- | src/components/navbar.vue | 6 | ||||
| -rw-r--r-- | src/main.ts | 43 | ||||
| -rw-r--r-- | src/router/index.ts | 4 | ||||
| -rw-r--r-- | src/views/LogIn.vue | 32 | ||||
| -rw-r--r-- | src/views/Register.vue | 21 |
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> |