* authentication for specific routes

feature: #1

src/authentication/AuthHelper.js

@@ -0,0 +1,42 @@
+import Keycloak from 'keycloak-js'
+
+let keycloak = null
+
+function setup() {
+  keycloak = new Keycloak({
+    url: 'https://auth.denysoft.eu/',
+    realm: 'FST',
+    clientId: 'frontend'
+  })
+  return keycloak
+    .init({
+      onLoad: 'login-required',
+      checkLoginIframe: false
+    })
+    .then(function (authenticated) {
+      setInterval(() => {
+        keycloak
+          .updateToken(90)
+          .then(refreshed => {
+            if (refreshed) {
+              console.info('Token refreshed ' + refreshed)
+            }
+          })
+          .catch(() => {
+            console.error('Failed to refresh token')
+          })
+      }, 6000)
+    })
+    .catch(function () {
+      alert('failed to initialize')
+    })
+}
+function login() {
+  keycloak.login()
+}
+
+function getKeycloak() {
+  return keycloak
+}
+
+export default { setup, login, getKeycloak }

src/components/ForbiddenPage.vue

@@ -0,0 +1,5 @@
+<template>
+  <div>
+    <h1>Forbidden!</h1>
+  </div>
+</template>

src/main.js

@@ -7,14 +7,15 @@ import { library } from '@fortawesome/fontawesome-svg-core'
 import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
 import { faUserSecret } from '@fortawesome/free-solid-svg-icons'
 
+import './assets/main.css'
+import AuthHelper from './authentication/AuthHelper'
+
 /* add icons to the library */
 library.add(faUserSecret)
 
-import './assets/main.css'
-
 const i18n = createI18n()
 
-const app = createApp(App)
+let app = createApp(App)
 
 app.use(router)
 app.use(i18n)

src/router/index.js

@@ -1,26 +1,58 @@
 import { createRouter, createWebHistory } from 'vue-router'
 import HomeView from '../views/HomeView.vue'
+import AuthHelper from '../authentication/AuthHelper'
 
 const router = createRouter({
   history: createWebHistory(import.meta.env.BASE_URL),
   routes: [
     {
       path: '/',
-      name: 'home',
-      component: HomeView
+      name: 'main',
+      component: HomeView,
+      meta: {
+        requiresAuth: false
+      }
     },
     {
       path: '/about',
       name: 'about',
       // this page is lazy-loaded when the route is visited.
-      component: () => import('../views/AboutView.vue')
+      component: () => import('../views/AboutView.vue'),
+      meta: {
+        requiresAuth: true
+      }
+    },
+    {
+      path: '/forbidden',
+      name: 'forbidden',
+      component: () => import('../components/ForbiddenPage.vue'),
+      meta: {
+        requiresAuth: false
+      }
     },
     {
       path: '/:pathMatch(.*)*',
       name: 'notfound',
-      component: () => import('../components/PageNotFound.vue')
+      component: () => import('../components/PageNotFound.vue'),
+      meta: {
+        requiresAuth: false
+      }
     }
   ]
 })
 
+router.beforeEach(async (to, from, next) => {
+  if (to.meta.requiresAuth === true) {
+    if (AuthHelper.getKeycloak() === null) {
+      await AuthHelper.setup()
+    }
+    if (!AuthHelper.getKeycloak().authenticated) {
+      next('/forbidden')
+    }
+    next()
+  } else {
+    next()
+  }
+})
+
 export default router

src/store/index.js

@@ -1,9 +1,11 @@
 import { createStore } from 'vuex'
 import moduleA from './moduleA.module'
 import moduleB from './moduleB.module'
+import keycloak from './keycloak.module'
 
 export default createStore({
   modules: {
+    keycloak: keycloak,
     a: moduleA,
     b: moduleB
   }

src/store/keycloak.module.js

@@ -0,0 +1,20 @@
+export default {
+  state: () => ({
+    keycloak: null
+  }),
+  mutations: {
+    initKeycloak(state, data) {
+      state.keycloak = data
+    }
+  },
+  actions: {
+    initKeycloak({ commit }) {
+      commit('initKeycloak')
+    }
+  },
+  getters: {
+    getKeycloak(state) {
+      return state.keycloak
+    }
+  }
+}