diff --git a/web/src/App.vue b/web/src/App.vue
index b964355..4459ca4 100644
--- a/web/src/App.vue
+++ b/web/src/App.vue
@@ -1,30 +1,11 @@
-
- Home |
- About
-
+
+
+
+
+
+
+
-
diff --git a/web/src/router/index.ts b/web/src/router/index.ts
index a6021e1..3a0249d 100644
--- a/web/src/router/index.ts
+++ b/web/src/router/index.ts
@@ -1,25 +1,43 @@
-import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router'
+import {createRouter, createWebHistory, RouteRecordRaw} from 'vue-router'
import Home from '../views/Home.vue'
+import store from '../store/index'
const routes: Array = [
- {
- path: '/',
- name: 'Home',
- component: Home
- },
- {
- path: '/about',
- name: 'About',
- // route level code-splitting
- // this generates a separate chunk (about.[hash].js) for this route
- // which is lazy-loaded when the route is visited.
- component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
- }
+ {
+ path: '/',
+ name: 'Home',
+ component: Home,
+ },
+ {
+ path: '/login',
+ name: 'Login',
+ component: () => import('../views/Login.vue'),
+ },
+ {
+ path: '/dashboard',
+ name: 'Dashboard',
+ component: () => import('../views/Dashboard.vue'),
+ meta: {
+ requiresAuth: true
+ }
+ }
]
const router = createRouter({
- history: createWebHistory(process.env.BASE_URL),
- routes
+ history: createWebHistory(process.env.BASE_URL),
+ routes
+})
+
+router.beforeEach((to, from, next) => {
+ if (to.matched.some(record => record.meta.requiresAuth)) {
+ if (store.getters.isLoggedIn) {
+ next()
+ return
+ }
+ next('/login')
+ } else {
+ next()
+ }
})
export default router
diff --git a/web/src/store/index.ts b/web/src/store/index.ts
index 5f05f19..834c645 100644
--- a/web/src/store/index.ts
+++ b/web/src/store/index.ts
@@ -1,12 +1,48 @@
-import { createStore } from 'vuex'
+import {createStore} from 'vuex'
+import axios, {AxiosResponse} from "axios";
export default createStore({
- state: {
- },
- mutations: {
- },
- actions: {
- },
- modules: {
- }
+ state: {
+ status: false,
+ user: {}
+ },
+ mutations: {
+ auth_success(state, user) {
+ state.status = true
+ state.user = user
+ },
+ auth_error(state) {
+ state.status = false
+ },
+ logout(state) {
+ state.status = false
+ state.user = {}
+ },
+ },
+ actions: {
+ login({commit}, user: { username: string, password: string }) {
+ return new Promise((resolve, reject) => {
+ axios({url: 'http://backend:6000/api/auth/login', data: {user}, method: 'POST'})
+ .then((resp: AxiosResponse) => {
+ commit("auth_success", user.username);
+ resolve(resp)
+ })
+ .catch((err: Error) => {
+ commit('auth_error')
+ reject(err)
+ })
+ })
+ },
+ logout({commit}) {
+ return new Promise((resolve, reject) => {
+ let user = null;
+ commit("logout");
+ resolve()
+ })
+ },
+ },
+ modules: {},
+ getters: {
+ isLoggedIn: state => !!state.status,
+ }
})