ADD: new login/logout handling in frontend

frontend/src/App.vue

@@ -43,7 +43,7 @@
                             <font-awesome-icon :icon="['far', 'user']"></font-awesome-icon>
                             <span v-if="$store.state.user"> {{$store.state.user.login_name}}</span>
                         </template>
-                        <b-dropdown-item v-if="$store.state.user" to="/logout">Abmelden</b-dropdown-item>
+                        <b-dropdown-item v-if="$store.state.user" @click="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>
@@ -95,6 +95,8 @@
 </style>
 
 <script>
+    import LoginService from '@/api-services/login.service'
+
     export default {
         data() {
             return {
@@ -129,7 +131,11 @@
                     }
                 }
                 return res
-
+            },
+            logout() {
+                LoginService.logout(this.$store.state.token.pk)
+                this.$store.commit('logout')
+                this.$router.push('/login')
             }
         }
     }

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

 import Axios from 'axios';
 
-const RESOURCE_NAME = '/api/login';
+const LOGIN_RESOURCE = '/api/login';
+const LOGOUT_RESOURCE = '/api/logout';
 
 export default {
     login(username, password) {
-        return Axios.post(RESOURCE_NAME, {'username': username, 'password': password})
+        return Axios.post(LOGIN_RESOURCE, {'username': username, 'password': password})
+    },
+    logout(token_pk) {
+        return Axios.post(LOGOUT_RESOURCE, {'token_pk': token_pk})
     }
 };