update: auth & update modal

src/App.vue

@@ -5,16 +5,34 @@
 </template>
 
 <script lang="ts">
-import { defineComponent } from 'vue';
+import { computed, defineComponent, watch } from 'vue';
 import dataMixin from './mixins/dataMixin';
 import { useStore } from './store';
 import PopUpCard from './components/PopUpCard.vue';
+import axios, { AxiosResponse } from 'axios';
+import { RouterView, useRouter } from 'vue-router';
+import { ILoginResponse, IUser, AuthState } from './types/types';
 
 export default defineComponent({
   mixins: [dataMixin],
   components: { PopUpCard },
   setup() {
     const store = useStore();
+    const router = useRouter();
+
+    router.beforeEach(async (to, from, next) => {
+      if (store.authState != AuthState.AUTHORIZED && to.path != '/login') return next({ path: '/login' });
+
+      return next();
+    });
+
+    watch(
+      computed(() => store.authState),
+      (state) => {
+        if (router.currentRoute.value.path == '/login' && state == AuthState.AUTHORIZED) router.push('/');
+      }
+    );
+
     return {
       store,
     };
@@ -22,15 +40,36 @@ export default defineComponent({
   methods: {
     async autoLogin() {
       const token = window.localStorage.getItem('auth-token');
-      if (token) {
-        this.store.isAuthorized = true;
-        this.store.token = token;
-        this.store.user = JSON.parse(window.localStorage.getItem('user')!);
+      if (!token) {
+        this.store.authState = AuthState.UNAUTHORIZED;
+        return;
       }
+
+      this.store.token = token;
+
+      const data = axios.post<{ user: IUser }>(`${this.API_URL}/auth/token`, { token: this.store.token });
+
+      data
+        .then((res) => {
+          console.log(res.data);
+
+          this.store.user = res.data.user;
+          this.store.authState = AuthState.AUTHORIZED;
+          this.$router.push('/');
+        })
+        .catch((err) => {
+          this.store.isAuthorized = false;
+          window.localStorage.removeItem('auth-token');
+
+          this.store.authState = AuthState.UNAUTHORIZED;
+          this.$router.push('/login');
+        });
     },
   },
+
   mounted() {
     this.autoLogin();
+
     if (window.localStorage.getItem('notifyDiscord') !== null) {
       this.store.notifyDiscord = Boolean(Number(window.localStorage.getItem('notifyDiscord')));
     }
@@ -97,13 +136,15 @@ button:focus-visible {
   transform: translate(-50%, -50%);
 
   width: 90vw;
-  max-width: 350px;
+  max-width: 550px;
 
   padding: 0.5em 1em;
   margin-top: 1em;
 
-  background-color: #2e2e2e;
-  box-shadow: 0 0 6px 1px #131313;
+  border-radius: 1em;
+
+  background-color: #1d1c33;
+  box-shadow: 0 0 6px 1px #414141;
 }
 
 // Scrollbar