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

This commit is contained in:
Белезов Павел Евгеньевич 2025-04-02 12:02:43 +08:00
parent 74df406121
commit 0f66d00f96
8 changed files with 85 additions and 43 deletions

View File

@ -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()

View File

@ -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;

25
resources/js/router.js Normal file
View File

@ -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;

View File

@ -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")

View File

@ -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(

View File

@ -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 = '';

View File

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

View File

@ -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>