ADD: token/session handling with vuex and local store

frontend/package-lock.json

@@ -4755,10 +4755,13 @@
       }
     },
     "eslint-utils": {
-      "version": "1.3.1",
-      "resolved": "https://registry.npmjs.org/eslint-utils/-/eslint-utils-1.3.1.tgz",
-      "integrity": "sha512-Z7YjnIldX+2XMcjr7ZkgEsOj/bREONV60qYeB/bjMAqqqZ4zxKyWX+BOUkdmRmA9riiIPVvo5x86m5elviOk0Q==",
-      "dev": true
+      "version": "1.4.2",
+      "resolved": "https://registry.npmjs.org/eslint-utils/-/eslint-utils-1.4.2.tgz",
+      "integrity": "sha512-eAZS2sEUMlIeCjBeubdj45dmBHQwPHWyBcT1VSYB7o9x9WRRqKxyUoiXlRjyAwzN7YEzHJlYg0NmzDRWx6GP4Q==",
+      "dev": true,
+      "requires": {
+        "eslint-visitor-keys": "^1.0.0"
+      }
     },
     "eslint-visitor-keys": {
       "version": "1.0.0",

frontend/src/App.vue

@@ -38,14 +38,17 @@
                                 class="badge badge-pill badge-success"
                                 id="trans_count">0</span>
                     </b-nav-item>
-                    <b-nav-item-dropdown>
+                    <b-nav-item-dropdown v-if="$store.state.user">
                         <template slot="button-content">
                             <font-awesome-icon :icon="['far', 'user']"></font-awesome-icon>
-                            <span v-if="session"> {{session.user.login_name}}</span>
-                            <span v-if="!session"> Anmelden</span>
+                            <span v-if="$store.state.user"> {{$store.state.user.login_name}}</span>
                         </template>
-                            <b-dropdown-item to="/logout">Abmelden</b-dropdown-item>
+                        <b-dropdown-item v-if="$store.state.user" to="/logout">Abmelden</b-dropdown-item>
                     </b-nav-item-dropdown>
+                    <b-nav-item v-if="!$store.state.user">
+                            <font-awesome-icon :icon="['far', 'user']"></font-awesome-icon>
+                            <span> Anmelden</span>
+                    </b-nav-item>
 
                 </b-navbar-nav>
             </b-collapse><!-- /.navbar-collapse -->
@@ -92,13 +95,10 @@
 </style>
 
 <script>
-    import SessionService from '@/api-services/session.service'
-
     export default {
         data() {
             return {
                 breadcrumbs: [],
-                session: null,
             }
         },
         watch: {
@@ -132,11 +132,6 @@
                 return res
 
             }
-        },
-        created() {
-            SessionService.get().then((res) =>{
-                this.session = res.data
-            })
         }
     }
 </script>

frontend/src/api-services/session.service.js

-import Axios from 'axios';
-
-const RESOURCE_NAME = '/api/session';
-
-export default {
-    get() {
-        return Axios.get(RESOURCE_NAME)
-    }
-};
-

frontend/src/main.js

 import Vue from 'vue'
 import App from './App.vue'
 import router from './router'
+import Vuex from 'vuex'
 import Axios from 'axios';
 import ColnameService from './api-services/colnames.service'
 import SystemInfoService from './api-services/system_info.service'
@@ -28,8 +29,36 @@ library.add(faUser, faEdit, faTrashAlt, faCheckSquare, faLifeRing)
 
 Vue.component('font-awesome-icon', FontAwesomeIcon)
 
+Vue.use(Vuex)
 Vue.use(BootstrapVue)
 
+const store = new Vuex.Store({
+    state: {
+        logged_in: false,
+        user: JSON.parse(window.localStorage.getItem('user')),
+        token: JSON.parse(window.localStorage.getItem('token'))
+    },
+    mutations: {
+        login (state, payload) {
+            let user = payload.user
+            let token = payload.token
+            state.logged_in = true
+            state.user = user
+            state.token = token
+            window.localStorage.setItem('user', JSON.stringify(user))
+            window.localStorage.setItem('token', JSON.stringify(token))
+        },
+        logout (state) {
+            state.logged_in = false
+            state.user = null
+            state.token = null
+            window.localStorage.removeItem('user')
+            window.localStorage.removeItem('token')
+        }
+    }
+})
+
+
 Vue.config.errorHandler = function (err, vm, info) {
     // handle error
     // `info` is a Vue-specific error info, e.g. which lifecycle hook
@@ -51,6 +80,7 @@ Axios.interceptors.response.use(
             var stat = error.response.status
             switch (stat) {
                 case 403:
+                    store.commit('logout')
                     router.push('/login')
                     break;
                 default:
@@ -76,6 +106,7 @@ ColnameService.getAll().then((response) => {
         Vue.prototype.$sysinfo_mods_by_name = mods_by_name
             new Vue({
                 router,
+                store,
                 render: h => h(App),
                 beforeCreate: function () {
                 }

frontend/src/views/Login.vue

@@ -34,8 +34,9 @@
         },
         methods: {
             login: function (user, pw) {
+                let self = this
                 LoginService.login(user, pw).then((response) => {
-                    window.console.log(response);
+                    self.$store.commit('login', {user: response.data.login, token: response.data.token})
                     router.push('/')
                 })
             }