Попытка переделать проверку аутентификации на middleware

resources/app.js

@@ -6,7 +6,6 @@ import 'vuetify/styles'
 import * as components from 'vuetify/components'
 import * as directives from 'vuetify/directives'
 import '@mdi/font/css/materialdesignicons.css'
-import { createMemoryHistory, createRouter } from 'vue-router'
 import {createPinia} from "pinia";
 
 const vuetify = createVuetify({
@@ -14,24 +13,7 @@ const vuetify = createVuetify({
     directives
 })
 
-import AuthButtons from './views/Auth/AuthButtons.vue'
+import router from './js/router.js'
-import Login from './views/Auth/Login.vue'
-import Registration from './views/Auth/Registration.vue'
-import Welcome from './views/Welcome.vue'
-import Wishlist from "./views/Wishlist/Wishlist.vue";
-
-const routes = [
-    { path: '/', component: Welcome },
-    { path: '/auth_options', component: AuthButtons },
-    { path: '/login', component: Login },
-    { path: '/registration', component: Registration },
-    { path: '/wishlist', component: Wishlist },
-]
-
-const router = createRouter({
-    history: createMemoryHistory(),
-    routes,
-})
 
 const pinia = createPinia()
 

resources/js/middleware/auth.js

@@ -0,0 +1,33 @@
+import {useUserStore} from '../../store/user.js'
+import router from '../router.js'
+
+function auth(to, from, next){
+    if (to.path === '/'){
+        next({path: '/wishlist'});
+    }
+    if (to.path === '/auth_options' || to.path === '/login' || to.path === '/registration'){
+        if (useUserStore().token !== null){
+            next({path: '/wishlist'});
+        } else {
+            next();
+        }
+    }
+    if (useUserStore().user === null && useUserStore().token !== null){
+        useUserStore().checkUser().then((result)=>{
+            if (result === true){
+                next();
+            } else {
+                next({path: '/auth_options'});
+            }
+        }).catch((error)=>{
+            useUserStore().nullifyUser();
+            next({path: '/auth_options'});
+        });
+    } else if (useUserStore().token === null){
+        next({path: '/auth_options'});
+    } else {
+        next();
+    }
+}
+
+export default auth;

resources/js/router.js

@@ -0,0 +1,25 @@
+import Welcome from "../views/Welcome.vue";
+import AuthButtons from "../views/Auth/AuthButtons.vue";
+import Login from "../views/Auth/Login.vue";
+import Registration from "../views/Auth/Registration.vue";
+import Wishlist from "../views/Wishlist/Wishlist.vue";
+import {createMemoryHistory, createRouter} from "vue-router";
+
+const routes = [
+    { path: '/', component: Welcome },
+    { path: '/auth_options', component: AuthButtons },
+    { path: '/login', component: Login },
+    { path: '/registration', component: Registration },
+    { path: '/wishlist', component: Wishlist },
+]
+
+const router = createRouter({
+    history: createMemoryHistory(),
+    routes,
+})
+
+import auth from './middleware/auth.js';
+
+router.beforeEach(auth);
+
+export default router;

resources/publicWishlist.js

@@ -16,12 +16,6 @@ const vuetify = createVuetify({
 
 const pinia = createPinia()
 
-const routes = [
+import router from './js/router.js'
-]
-
-const router = createRouter({
-    history: createMemoryHistory(),
-    routes,
-})
 
 createApp(PublicApp).use(vuetify).use(router).use(pinia).mount("#app")

resources/store/user.js

@@ -14,8 +14,9 @@ export const useUserStore = defineStore('user', {
             this.token = token;
             localStorage.setItem('auth_token', token);
         },
-        checkUser() {
+        async checkUser() {
-            axios.get(
+            let result = null;
+            await axios.get(
                 '/api/auth/user',
                 {
                     headers:
@@ -26,9 +27,12 @@ export const useUserStore = defineStore('user', {
                 }
             ).then((res) => {
                 this.setUser(res.data);
+                result = true;
             }).catch((error) => {
                 this.nullifyUser();
-            })
+                result = error;
+            });
+            return result;
         },
         async login(email, password, rememberMe) {
             await axios.post(

resources/views/Auth/Login.vue

@@ -47,9 +47,6 @@ export default {
                     if (isLogged){
                         this.errorMessage = '';
                         this.errorMessageContainerStyle = 'display: none;';
-                        // this.$router.push('/');
-                        // console.log(window.location.href);
-                        // window.location.replace(window.location.href);
                     } else {
                         this.errorMessage = 'Authentication error';
                         this.errorMessageContainerStyle = '';

resources/views/Auth/Registration.vue

@@ -52,7 +52,6 @@ export default {
                     if (isRegistred){
                         this.errorMessage = '';
                         this.errorMessageContainerStyle = 'display: none;';
-                        this.$router.push('/');
                     } else {
                         this.errorMessage = 'Registration error';
                         this.errorMessageContainerStyle = '';

resources/views/Welcome.vue

@@ -28,7 +28,7 @@
 
 <script>
 import {useUserStore} from "../store/user.js";
-import {watch} from "vue";
+import {ref, watch} from "vue";
 import FeedbackFooter from "./PublicWishlist/FeedbackFooter.vue";
 export default {
     name: "Welcome",
@@ -37,12 +37,13 @@ export default {
         isAuthenticated: false,
         userStore: useUserStore(),
         fetchingUser: false,
-        isWide: window.innerWidth >= 800
+        isWide: window.innerWidth >= 800,
+        user: null
     }),
     computed: {
-        user() {
+        // user() {
-            return this.userStore.user;
+        //     return ref(this.userStore.user);
-        },
+        // },
     },
     methods: {
         async logout() {
@@ -52,17 +53,24 @@ export default {
     },
     mounted() {
         this.fetchingUser = true;
-        this.$router.push('/auth_options');
         watch(this.userStore, (newStore, oldStore)=>{
             this.isAuthenticated = newStore.user !== null && newStore.user !== undefined;
             this.fetchingUser = false;
             if (this.isAuthenticated) {
-                this.$router.push('/wishlist');
+                this.user = newStore.user;
-            } else {
-                this.$router.push('/auth_options');
             }
         });
-        this.userStore.checkUser();
+        // this.$router.push('/auth_options');
+        // watch(this.userStore, (newStore, oldStore)=>{
+        //     this.isAuthenticated = newStore.user !== null && newStore.user !== undefined;
+        //     this.fetchingUser = false;
+        //     if (this.isAuthenticated) {
+        //         this.$router.push('/wishlist');
+        //     } else {
+        //         this.$router.push('/auth_options');
+        //     }
+        // });
+        // this.userStore.checkUser();
     }
 }
 </script>