From b007fdcb81c1a1e3fc06cabbb95c475921bde882 Mon Sep 17 00:00:00 2001 From: Vladimir Voronin Date: Fri, 25 Oct 2024 13:28:44 +0300 Subject: [PATCH] auth --- src/components/auth/LoginView.vue | 82 ++++++++++++++++++++++++ src/components/settings/SettingsView.vue | 2 +- src/plugins/axios.ts | 3 +- src/router/index.ts | 34 +++++++--- src/services/axiosSetup.ts | 31 +++++++++ src/services/budgetsService.ts | 2 +- src/services/categoryService.ts | 2 +- src/services/recurrentService.ts | 2 +- src/services/transactionService.ts | 2 +- 9 files changed, 144 insertions(+), 16 deletions(-) create mode 100644 src/components/auth/LoginView.vue create mode 100644 src/services/axiosSetup.ts diff --git a/src/components/auth/LoginView.vue b/src/components/auth/LoginView.vue new file mode 100644 index 0000000..d79d26f --- /dev/null +++ b/src/components/auth/LoginView.vue @@ -0,0 +1,82 @@ + + + + + diff --git a/src/components/settings/SettingsView.vue b/src/components/settings/SettingsView.vue index 76ac1fc..7366df0 100644 --- a/src/components/settings/SettingsView.vue +++ b/src/components/settings/SettingsView.vue @@ -8,7 +8,7 @@ import RecurrentSettingView from "@/components/settings/RecurrentSettingView.vue

Настройки

- test +
diff --git a/src/plugins/axios.ts b/src/plugins/axios.ts index 7940dd4..59c1ae6 100644 --- a/src/plugins/axios.ts +++ b/src/plugins/axios.ts @@ -3,7 +3,8 @@ import axios from 'axios'; // Создание экземпляра axios с базовым URL const apiClient = axios.create({ - baseURL: 'https://luminic.space/api/v1', + // baseURL: 'https://luminic.space/api/v1', + baseURL: 'http://localhost:8000/api/v1', headers: { 'Content-Type': 'application/json', diff --git a/src/router/index.ts b/src/router/index.ts index 7cb4ba6..61b11e6 100644 --- a/src/router/index.ts +++ b/src/router/index.ts @@ -1,4 +1,4 @@ -import {createRouter, createWebHistory} from 'vue-router'; +import {createRouter, createWebHistory, useRoute} from 'vue-router'; import CategoriesList from '@/components/settings/categories/CategoriesList.vue'; import CreateCategoryModal from "@/components/settings/categories/CreateCategoryModal.vue"; import CategoryListItem from "@/components/settings/categories/CategoryListItem.vue"; // Импортируем новый компонент @@ -7,19 +7,21 @@ import BudgetView from "@/components/budgets/BudgetView.vue"; import SettingsView from "@/components/settings/SettingsView.vue"; import RecurrentList from "@/components/settings/recurrent/RecurrentList.vue"; import TransactionList from "@/components/transactions/TransactionList.vue"; +import LoginView from "@/components/auth/LoginView.vue"; const routes = [ - {path: '/', name: 'Budgets main', component: BudgetList}, - {path: '/budgets', name: 'Budgets', component: BudgetList}, - {path: '/budgets/:id', name: 'BudgetView', component: BudgetView}, - {path: '/transactions/:mode*', name: 'Transaction List', component: TransactionList}, + {path: '/', name: 'Budgets main', component: BudgetList, meta: { requiresAuth: true }}, + { path: '/login', component: LoginView }, + {path: '/budgets', name: 'Budgets', component: BudgetList, meta: { requiresAuth: true }}, + {path: '/budgets/:id', name: 'BudgetView', component: BudgetView, meta: { requiresAuth: true }}, + {path: '/transactions/:mode*', name: 'Transaction List', component: TransactionList, meta: { requiresAuth: true }}, // {path: '/transactions/create', name: 'Transaction List', component: TransactionList}, - {path: '/settings/', name: 'Settings', component: SettingsView}, - {path: '/settings/categories', name: 'Categories', component: CategoriesList}, - {path: '/settings/recurrents', name: 'Recurrent operations list', component: RecurrentList}, - {path: '/settings/categories/create', name: "Categories Creation", component: CreateCategoryModal},// Добавляем новый маршрут - {path: '/settings/categories/one', name: "Categories Creation", component: CategoryListItem}// Добавляем новый маршрут + {path: '/settings/', name: 'Settings', component: SettingsView, meta: { requiresAuth: true }}, + {path: '/settings/categories', name: 'Categories', component: CategoriesList, meta: { requiresAuth: true }}, + {path: '/settings/recurrents', name: 'Recurrent operations list', component: RecurrentList, meta: { requiresAuth: true }}, + {path: '/settings/categories/create', name: "Categories Creation", component: CreateCategoryModal, meta: { requiresAuth: true }},// Добавляем новый маршрут + {path: '/settings/categories/one', name: "Categories Creation", component: CategoryListItem, meta: { requiresAuth: true }}// Добавляем новый маршрут ]; const router = createRouter({ @@ -27,4 +29,16 @@ const router = createRouter({ routes, }); +router.beforeEach((to, from, next) => { + const token = localStorage.getItem('token'); + if (to.meta.requiresAuth && !token) { + const router= useRoute() + console.log(to) + console.log(router.path) + console.log(router.params) + next('/login?back='+to.fullPath); + } else { + next(); + } +}); export default router; diff --git a/src/services/axiosSetup.ts b/src/services/axiosSetup.ts new file mode 100644 index 0000000..05eacf6 --- /dev/null +++ b/src/services/axiosSetup.ts @@ -0,0 +1,31 @@ +// src/services/axiosSetup.ts +import axios from 'axios'; +import { useRouter } from 'vue-router'; + +// Создаем экземпляр axios +const api = axios.create({ + baseURL: 'http://localhost:8000/api/v1', +}); + +// Устанавливаем токен из localStorage при каждом запуске +const token = localStorage.getItem('token'); +if (token) { + api.defaults.headers.common['Authorization'] = `Bearer ${token}`; +} + +// Перехватчик ответа для проверки 401 статуса +api.interceptors.response.use( + + (response) => response, + (error) => { + if (error.response && error.response.status === 401) { + localStorage.removeItem('token'); + const router = useRouter(); + console.log(router.params) + router.push('/login'); + } + return Promise.reject(error); + } +); + +export default api; diff --git a/src/services/budgetsService.ts b/src/services/budgetsService.ts index 5d6faf4..c0f29b2 100644 --- a/src/services/budgetsService.ts +++ b/src/services/budgetsService.ts @@ -1,4 +1,4 @@ -import apiClient from '@/plugins/axios'; +import apiClient from '@/services/axiosSetup'; import {BudgetCategory} from "@/models/Budget"; // Импортируете настроенный экземпляр axios diff --git a/src/services/categoryService.ts b/src/services/categoryService.ts index 9404904..c167cf5 100644 --- a/src/services/categoryService.ts +++ b/src/services/categoryService.ts @@ -1,5 +1,5 @@ // src/services/categoryService.ts -import apiClient from '@/plugins/axios'; +import apiClient from '@/services/axiosSetup'; import {Category} from "@/models/Category"; // Импортируете настроенный экземпляр axios export const getCategories = async (type = null) => { diff --git a/src/services/recurrentService.ts b/src/services/recurrentService.ts index 788d66e..b5c3f63 100644 --- a/src/services/recurrentService.ts +++ b/src/services/recurrentService.ts @@ -1,5 +1,5 @@ // src/services/recurrentyService.ts -import apiClient from '@/plugins/axios'; +import apiClient from '@/services/axiosSetup'; import { RecurrentPayment} from "@/models/Recurrent"; // Импортируете настроенный экземпляр axios export const getRecurrentPayments = async () => { diff --git a/src/services/transactionService.ts b/src/services/transactionService.ts index 31e2230..6ed01d0 100644 --- a/src/services/transactionService.ts +++ b/src/services/transactionService.ts @@ -1,4 +1,4 @@ -import apiClient from '@/plugins/axios'; +import apiClient from '@/services/axiosSetup'; import {Transaction} from "@/models/Transaction"; import {format} from "date-fns"; // Импортируете настроенный экземпляр axios