Попытка переделать проверку аутентификации на middleware
This commit is contained in:
		
							parent
							
								
									74df406121
								
							
						
					
					
						commit
						0f66d00f96
					
				|  | @ -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 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, | ||||
| }) | ||||
| import router from './js/router.js' | ||||
| 
 | ||||
| const pinia = createPinia() | ||||
| 
 | ||||
|  |  | |||
|  | @ -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; | ||||
|  | @ -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; | ||||
|  | @ -16,12 +16,6 @@ const vuetify = createVuetify({ | |||
| 
 | ||||
| const pinia = createPinia() | ||||
| 
 | ||||
| const routes = [ | ||||
| ] | ||||
| 
 | ||||
| const router = createRouter({ | ||||
|     history: createMemoryHistory(), | ||||
|     routes, | ||||
| }) | ||||
| import router from './js/router.js' | ||||
| 
 | ||||
| createApp(PublicApp).use(vuetify).use(router).use(pinia).mount("#app") | ||||
|  |  | |||
|  | @ -14,8 +14,9 @@ export const useUserStore = defineStore('user', { | |||
|             this.token = token; | ||||
|             localStorage.setItem('auth_token', token); | ||||
|         }, | ||||
|         checkUser() { | ||||
|             axios.get( | ||||
|         async checkUser() { | ||||
|             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( | ||||
|  |  | |||
|  | @ -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 = ''; | ||||
|  |  | |||
|  | @ -52,7 +52,6 @@ export default { | |||
|                     if (isRegistred){ | ||||
|                         this.errorMessage = ''; | ||||
|                         this.errorMessageContainerStyle = 'display: none;'; | ||||
|                         this.$router.push('/'); | ||||
|                     } else { | ||||
|                         this.errorMessage = 'Registration error'; | ||||
|                         this.errorMessageContainerStyle = ''; | ||||
|  |  | |||
|  | @ -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() { | ||||
|             return this.userStore.user; | ||||
|         }, | ||||
|         // 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'); | ||||
|             } else { | ||||
|                 this.$router.push('/auth_options'); | ||||
|                 this.user = newStore.user; | ||||
|             } | ||||
|         }); | ||||
|         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> | ||||
|  |  | |||
		Loading…
	
		Reference in New Issue