19 |
38 |
39 |
--------------------------------------------------------------------------------
/src/main.ts:
--------------------------------------------------------------------------------
1 | import { createApp } from 'vue'
2 | import { createPinia } from 'pinia'
3 |
4 | import App from './App.vue'
5 | import router from './router'
6 |
7 | import './assets/main.css'
8 |
9 | const app = createApp(App)
10 |
11 | app.use(createPinia())
12 | app.use(router)
13 |
14 | app.mount('#app')
15 |
--------------------------------------------------------------------------------
/src/router/index.ts:
--------------------------------------------------------------------------------
1 | import { createRouter, createWebHistory } from 'vue-router'
2 | import DashboardView from '@/views/DashboardView.vue'
3 | import LoginView from '@/views/LoginView.vue'
4 | import { useAuthStore } from '@/stores/auth'
5 |
6 | const router = createRouter({
7 | history: createWebHistory(import.meta.env.BASE_URL),
8 | routes: [
9 | {
10 | path: '/',
11 | name: 'home',
12 | component: DashboardView
13 | },
14 | {
15 | path: '/login',
16 | name: 'login',
17 | component: LoginView }
18 | ]
19 | });
20 |
21 | router.beforeEach(async (to) => {
22 | // redirect to login page if not logged in and trying to access a restricted page
23 | const publicPages = ['/login'];
24 | const authRequired = !publicPages.includes(to.path);
25 | const auth = useAuthStore();
26 |
27 | if (authRequired && !auth.user) {
28 | auth.returnUrl = to.fullPath;
29 | return '/login';
30 | }
31 | });
32 |
33 |
34 | export default router
35 |
--------------------------------------------------------------------------------
/src/stores/auth.ts:
--------------------------------------------------------------------------------
1 | import { defineStore } from 'pinia';
2 | import router from '@/router';
3 |
4 | export const useAuthStore = defineStore({
5 | id: 'auth',
6 | state: () => {
7 | return {
8 | user: localStorage.getItem('user') ? JSON.parse(localStorage.getItem('user')!) : null,
9 | token: localStorage.getItem('token') ? JSON.parse(localStorage.getItem('token')!) : null,
10 | returnUrl: '/'
11 | }
12 | },
13 | actions: {
14 | async login(username: string, password: string) {
15 | const response = await fetch('http://localhost:8080/api/auth/token', {
16 | method: 'POST',
17 | headers: {
18 | 'Content-Type': 'application/json'
19 | },
20 | body: JSON.stringify({ username, password })
21 | });
22 |
23 | if (response.status === 200) {
24 | const token = await response.text();
25 | localStorage.setItem('user', JSON.stringify(username));
26 | localStorage.setItem('token', JSON.stringify(token));
27 | this.user = username;
28 | this.token = token;
29 | router.push(this.returnUrl || '/');
30 | } else {
31 | throw new Error('Invalid credentials');
32 | }
33 |
34 | },
35 | logout() {
36 | this.user = '';
37 | this.token = '';
38 | localStorage.removeItem('user');
39 | localStorage.removeItem('token');
40 | router.push('/login');
41 | }
42 | }
43 | });
44 |
--------------------------------------------------------------------------------
/src/views/DashboardView.vue:
--------------------------------------------------------------------------------
1 |
19 |
20 |