use vuex-persistedstate instead of cookies.

frontend/package.json

@@ -75,7 +75,8 @@
     "vue-qrcode-reader": "^2.3.16",
     "vue-router": "^3.0.6",
     "vue2-transitions": "^0.2.3",
-    "vuex": "^3.6.0"
+    "vuex": "^3.6.0",
+    "vuex-persistedstate": "^4.0.0-beta.3"
   },
   "devDependencies": {
     "@vue/cli-plugin-babel": "^3.7.0",

frontend/src/App.vue

@@ -17,7 +17,7 @@
     </header>
     <div class="">
       <particles-bg type="custom" :config="config" :bg="true" />
-      <component :is="$store.state.session_id ? 'DashboardLayout' : 'AuthLayoutGDD'" />
+      <component :is="$route.meta.requiresAuth ? 'DashboardLayout' : 'AuthLayoutGDD'" />
     </div>
   </div>
 </template>
@@ -38,31 +38,9 @@ export default {
   },
   data() {
     return {
-      session_id: null,
-      email: '',
       language: 'en',
     }
   },
-  created() {
-    //console.log('xx', $cookies.get('gdd_lang'))
-    //console.log('%cWillkommen bei Gradido %cgreen text', 'font-weight:bold', 'color: green')
-    if ($cookies.isKey('gdd_session_id') == true) {
-      //console.log('%cHey %c' + $cookies.get('gdd_u') + '', 'font-weight:bold', 'color: orange')
-      this.$store.commit('session_id', $cookies.get('gdd_session_id'))
-      this.$store.commit('email', $cookies.get('gdd_u'))
-      if ($cookies.get('gdd_lang') != 'de' || $cookies.get('gdd_lang') != 'de') {
-        this.$store.commit('language', 'de')
-      } else {
-        this.$store.commit('language', $cookies.get('gdd_lang'))
-      }
-
-      this.$i18n.locale = $cookies.get('gdd_lang')
-      this.$router.push('overview')
-    } else {
-      //console.log('app.vue to Logout')
-      this.$store.dispatch('logout')
-    }
-  },
   data() {
     return {
       config: {

frontend/src/main.js

@@ -16,6 +16,14 @@ Vue.use(DashboardPlugin)
 Vue.config.productionTip = false
 Vue.use(VueCookies)
 
+router.beforeEach((to, from, next) => {
+  if (to.meta.requiresAuth && !store.state.session_id) {
+    next({ path: '/login' })
+  } else {
+    next()
+  }
+})
+
 /* eslint-disable no-new */
 new Vue({
   el: '#app',

frontend/src/routes/router.js

@@ -1,6 +1,7 @@
 import Vue from 'vue'
 import VueRouter from 'vue-router'
 import routes from './routes'
+import { store } from '../store/store'
 
 Vue.use(VueRouter)
 
@@ -21,11 +22,11 @@ const router = new VueRouter({
 })
 
 router.beforeEach((to, from, next) => {
-  let language = to.params.lang
-  if (!language) {
-    language = 'de'
+  if (to.meta.requiresAuth && !store.state.session_id) {
+    next({ path: '/login' })
+  } else {
+    next()
   }
-  next()
 })
 
 export default router

frontend/src/routes/routes.js

@@ -1,6 +1,12 @@
 import NotFound from '@/views/NotFoundPage.vue'
 
 const routes = [
+  {
+    path: '/',
+    redirect: (to) => {
+      return { path: '/login' }
+    },
+  },
   {
     path: '/overview',
     component: () => import('../views/KontoOverview.vue'),
@@ -11,18 +17,30 @@ const routes = [
   {
     path: '/profile',
     component: () => import('../views/Pages/UserProfileCard.vue'),
+    meta: {
+      requiresAuth: true,
+    },
   },
   {
     path: '/profileedit',
     component: () => import('../views/Pages/UserProfileEdit.vue'),
+    meta: {
+      requiresAuth: true,
+    },
   },
   {
     path: '/activity',
     component: () => import('../views/Pages/UserProfileActivity.vue'),
+    meta: {
+      requiresAuth: true,
+    },
   },
   {
     path: '/transactions',
     component: () => import('../views/Pages/UserProfileTransactionList.vue'),
+    meta: {
+      requiresAuth: true,
+    },
   },
   {
     path: '/login',
@@ -40,11 +58,6 @@ const routes = [
     path: '/password',
     component: () => import('../views/Pages/Password.vue'),
   },
-  {
-    path: '/explorer',
-    name: 'Explorer',
-    component: () => import('../views/Pages/Explorer.vue'),
-  },
   { path: '*', component: NotFound },
 ]
 

frontend/src/store/store.js

@@ -1,11 +1,17 @@
 import Vue from 'vue'
 import Vuex from 'vuex'
+//import router from '../routes/router.js'
 Vue.use(Vuex)
-import router from '../routes/router.js'
 import loginAPI from '../apis/loginAPI'
 import communityAPI from '../apis/communityAPI'
+import createPersistedState from 'vuex-persistedstate'
 
 export const store = new Vuex.Store({
+  plugins: [
+    createPersistedState({
+      storage: window.sessionStorage,
+    }),
+  ],
   state: {
     session_id: null,
     email: '',
@@ -31,7 +37,6 @@ export const store = new Vuex.Store({
   // Syncronous mutation of the state
   mutations: {
     language: (state, language) => {
-      //console.log('mutation: language', language)
       state.language = language
       $cookies.set('gdd_lang', language)
       if (state.language == 'de') {
@@ -43,52 +48,34 @@ export const store = new Vuex.Store({
       }
     },
     loginfail: (state, loginfail) => {
-      //console.log('mutation: email')
       state.loginfail = loginfail
     },
     email: (state, email) => {
-      //console.log('mutation: email')
       state.email = email
     },
     session_id: (state, session_id) => {
-      //console.log('mutation: session_id')
       state.session_id = session_id
     },
     user_balance: (state, balance) => {
-      //console.log('mutation: user_balance')
       state.user.balance = balance / 10000
     },
     user_balance_gdt: (state, balance) => {
-      //console.log('mutation: user_balance_gdt')
       state.user.balance_gdt = balance / 10000
     },
   },
   // Asyncronous actions - used for api calls
   actions: {
     login: async ({ dispatch, commit }, data) => {
-      const result = await loginAPI.login(data.email, data.password)
-      if (result.success) {
-        commit('session_id', result.result.data.session_id)
-        commit('email', data.email)
-        $cookies.set('gdd_session_id', result.result.data.session_id)
-        $cookies.set('gdd_u', data.email)
-        router.push('/overview')
-      } else {
-        // Register failed, we perform a logout
-        //alert('>>>>> FAIl LOGIN')
-        commit('loginfail', true)
-
-        //dispatch('logout')
-      }
-    },
-    passwordReset: async (data) => {
-      //console.log('<<<<<<<<<<< PASSWORT RESET TODO >>>>>>>>>>>', data.email)
+      commit('session_id', data.session_id)
+      commit('email', data.email)
+      //      $cookies.set('gdd_session_id', result.result.data.session_id)
+      //      $cookies.set('gdd_u', data.email)
     },
+    passwordReset: async (data) => {},
     schoepfen: async (data) => {
       // http://localhost/transaction-creations/ajaxCreate
     },
     createUser: async ({ commit, dispatch }, data) => {
-      // console.log('action: createUser')
       const result = await loginAPI.create(
         data.email,
         data.first_name,
@@ -100,26 +87,20 @@ export const store = new Vuex.Store({
         commit('email', data.email)
         $cookies.set('gdd_session_id', result.result.data.session_id)
         $cookies.set('gdd_u', data.email)
-        router.push('/overview')
+        //router.push('/overview')
       } else {
         // Register failed, we perform a logout
-        // console.log('action createUser to  logout start')
         dispatch('logout')
       }
     },
     logout: async ({ commit, state }) => {
-      //console.log('action: logout')
       if (state.session_id) {
         const result = await loginAPI.logout(state.session_id)
         // The result can be error, but thats ok with us
       }
-
+      sessionStorage.clear()
       commit('session_id', null)
       commit('email', null)
-      $cookies.remove('gdd_session_id')
-      $cookies.remove('gdd_u')
-      $cookies.remove('gdd_lang')
-      router.push('/Login')
     },
     accountBalance: async ({ commit, dispatch, state }) => {
       const result = await communityAPI.balance($cookies.get('gdd_session_id'))

frontend/src/views/Layout/DashboardNavbar.vue

@@ -116,8 +116,8 @@ export default {
       this.activeNotifications = false
     },
     logout() {
-      //console.log("DashboardNavbar.vue user logout() : ")
       this.$store.dispatch('logout')
+      this.$router.push('/login')
     },
   },
 }

frontend/src/views/Pages/Login.vue

@@ -95,6 +95,8 @@
   </div>
 </template>
 <script>
+import loginAPI from '../../apis/loginAPI'
+
 export default {
   name: 'login',
   data() {
@@ -104,17 +106,24 @@ export default {
         password: '',
         // rememberMe: false
       },
+      loginfail: false,
     }
   },
   methods: {
-    onSubmit() {
-      this.$store.dispatch('login', {
-        email: this.model.email,
-        password: this.model.password,
-      })
+    async onSubmit() {
+      const result = await loginAPI.login(this.model.email, this.model.password)
+      if (result.success) {
+        this.$store.dispatch('login', {
+          session_id: result.result.data.session_id,
+          email: this.model.email,
+        })
+        this.$router.push('/overview')
+      } else {
+        this.loginfail = true
+      }
     },
     closeAlert() {
-      this.$store.state.loginfail = false
+      this.loginfail = false
     },
   },
 }

frontend/yarn.lock

@@ -11879,6 +11879,11 @@ shellwords@^0.1.1:
   resolved "https://registry.yarnpkg.com/shellwords/-/shellwords-0.1.1.tgz#d6b9181c1a48d397324c84871efbcfc73fc0654b"
   integrity sha512-vFwSUfQvqybiICwZY5+DAWIPLKsWO31Q91JSKl3UYv+K5c2QRPzn0qzec6QPu1Qc9eHYItiP3NdJqNVqetYAww==
 
+shvl@^2.0.2:
+  version "2.0.3"
+  resolved "https://registry.yarnpkg.com/shvl/-/shvl-2.0.3.tgz#eb4bd37644f5684bba1fc52c3010c96fb5e6afd1"
+  integrity sha512-V7C6S9Hlol6SzOJPnQ7qzOVEWUQImt3BNmmzh40wObhla3XOYMe4gGiYzLrJd5TFa+cI2f9LKIRJTTKZSTbWgw==
+
 sigmund@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/sigmund/-/sigmund-1.0.1.tgz#3ff21f198cad2175f9f3b781853fd94d0d19b590"
@@ -13406,6 +13411,14 @@ vue@^2.2.6, vue@^2.5.17, vue@^2.6.11:
   resolved "https://registry.yarnpkg.com/vue/-/vue-2.6.12.tgz#f5ebd4fa6bd2869403e29a896aed4904456c9123"
   integrity sha512-uhmLFETqPPNyuLLbsKz6ioJ4q7AZHzD8ZVFNATNyICSZouqP2Sz0rotWQC8UNBF6VGSCs5abnKJoStA6JbCbfg==
 
+vuex-persistedstate@^4.0.0-beta.3:
+  version "4.0.0-beta.3"
+  resolved "https://registry.yarnpkg.com/vuex-persistedstate/-/vuex-persistedstate-4.0.0-beta.3.tgz#89dd712de72d28e85cc95467d066002c1405f277"
+  integrity sha512-T4IRD27qoUWh+8qr6T6zVp15xO7x/nPgnU13OD0C2uUwA7U9PhGozrj6lvVmMYDyRgc36J0msMXn3GvwHjkIhA==
+  dependencies:
+    deepmerge "^4.2.2"
+    shvl "^2.0.2"
+
 vuex@^3.6.0:
   version "3.6.2"
   resolved "https://registry.yarnpkg.com/vuex/-/vuex-3.6.2.tgz#236bc086a870c3ae79946f107f16de59d5895e71"