auth: dodano guard ścieżek

.env

@@ -1,2 +1,2 @@
 VITE_API_URL="https://spythere.pl"
-VITE_API_URL_DEV="http://localhost:3000"
+VITE_API_URL_DEV="https://spythere.pl"

src/App.vue

@@ -5,38 +5,28 @@
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, watch } from 'vue';
+import { defineComponent } from 'vue';
 import dataMixin from './mixins/dataMixin';
-import { useStore } from './store';
 import PopUpCard from './components/PopUpCard.vue';
-import axios, { AxiosResponse } from 'axios';
+import axios from 'axios';
-import { RouterView, useRouter } from 'vue-router';
+import { RouterView } from 'vue-router';
-import { ILoginResponse, IUser, AuthState } from './types/types';
+import { IUser, AuthState } from './types/types';
+import useRouteGuard from './mixins/useRouteGuard';
+import { useStore } from './store';
 
 export default defineComponent({
   mixins: [dataMixin],
   components: { PopUpCard },
+
   setup() {
-    const store = useStore();
+    const { routeAuthGuard } = useRouteGuard();
-    const router = useRouter();
+    routeAuthGuard();
-
-    router.beforeEach(async (to, from, next) => {
-      if (store.authState == AuthState.AUTHORIZED && to.path == '/login') return next({ path: '/' });
-
-      return next();
-    });
-
-    watch(
-      computed(() => store.authState),
-      (state) => {
-        if (router.currentRoute.value.path == '/login' && state == AuthState.AUTHORIZED) router.push('/');
-      }
-    );
 
     return {
-      store,
+      store: useStore(),
     };
   },
+
   methods: {
     async autoLogin() {
       const token = window.localStorage.getItem('auth-token');

src/mixins/useRouteGuard.ts

@@ -0,0 +1,30 @@
+import { computed, defineComponent, watch } from 'vue';
+import { useRouter } from 'vue-router';
+import { useStore } from '../store';
+import { AuthState } from '../types/types';
+
+export default () => {
+  const store = useStore();
+  const router = useRouter();
+
+  const routeAuthGuard = () => {
+    router.beforeEach(async (to, from, next) => {
+      if (store.authState == AuthState.AUTHORIZED && to.path == '/login') return next({ path: '/' });
+
+      return next();
+    });
+
+    watch(
+      computed(() => store.authState),
+      (state) => {
+        if (router.currentRoute.value.path == '/login' && state == AuthState.AUTHORIZED) router.push('/');
+        if (state == AuthState.UNAUTHORIZED) router.push('/login');
+      }
+    );
+  };
+
+  return {
+    routeAuthGuard,
+  };
+};
+

src/store.ts

@@ -1,6 +1,5 @@
 import { defineStore } from 'pinia';
-import { AuthState, Availability, ChangeProp, HeaderTypes, IStore } from './types/types';
+import { AuthState, IStore } from './types/types';
-import { getAvailabilityValue } from './types/typeUitls';
 
 export const useStore = defineStore('store', {
   state: () =>
@@ -26,6 +25,8 @@ export const useStore = defineStore('store', {
       alertMessage: '',
       confirmMessage: '',
 
+      maxVisibleResults: 15,
+
       changesResponse: [],
     } as IStore),
 });

src/types/types.ts

@@ -89,6 +89,8 @@ export interface IStore {
   alertMessage: string;
   confirmMessage: string;
 
+  maxVisibleResults: number;
+
   changesResponse: string[];
 }