better authentication management

src/App.vue

@@ -16,8 +16,8 @@
 <script>
 import { mapState, mapGetters } from 'vuex'
 import Navbar from '@/components/Navbar/Navbar.vue'
-import { isAuthenticated } from '@/services/auth.js'
 import { version } from '../package.json'
+import qbit from '@/services/qbit'
 
 export default {
     components: { Navbar },
@@ -26,17 +26,14 @@ export default {
         return {}
     },
     methods: {
-        async getAuth() {
-            return await isAuthenticated()
+        async checkAuthenticated() {
+            const res = await qbit.login()
+            this.$store.commit('LOGIN', res === 'Ok.')
         }
     },
     computed: {
         ...mapState(['rid', 'mainData', 'preferences', 'modals']),
-        ...mapGetters([
-            'getTheme',
-            'getDynamicComponent',
-            'getDynamicComponent'
-        ]),
+        ...mapGetters(['getTheme', 'getAuthenticated']),
         theme() {
             return this.getTheme() ? 'dark' : 'light'
         },
@@ -44,11 +41,12 @@ export default {
             return this.$vuetify.theme.themes[this.theme].background
         },
         isAuthenticated() {
-            return this.getAuth()
+            return this.getAuthenticated()
         }
     },
     created() {
         this.$store.commit('SET_APP_VERSION', version)
+        this.checkAuthenticated()
     }
 }
 </script>

src/router.js

@@ -32,7 +32,7 @@ router.beforeEach(async (to, from, next) => {
     const onlyWhenLoggedOut = to.matched.some(
         record => record.meta.onlyWhenLoggedOut
     )
-    const authenticated = await isAuthenticated()
+    const authenticated = isAuthenticated()
 
     if (!isPublic && !authenticated) {
         return next({

src/services/auth.js

@@ -1,6 +1,5 @@
-import qbit from '@/services/qbit'
+import store from '../store'
 
-export async function isAuthenticated() {
-    const res = await qbit.login()
-    return res === 'Ok.'
+export function isAuthenticated() {
+    return store.state.authenticated
 }

src/store/getters.js

@@ -12,5 +12,6 @@ export default {
     getAvailableTags: state => () => state.status.tags,
     getCategories: state => () => state.categories,
     getModals: state => () => state.modals,
-    getTorrents: state => () => state.torrents
+    getTorrents: state => () => state.torrents,
+    getAuthenticated: state => () => state.authenticated
 }

src/views/Login.vue

@@ -1,6 +1,6 @@
 <template>
     <v-layout row wrap align-center class="justify-center">
-        <div style="margin: 100px auto">
+        <div style="margin: 130px auto">
             <v-container class="grey lighten-4 pa-0">
                 <v-card max-width="400" flat>
                     <v-container :class="`pa-3 project done`">