Przechowywanie Tokenu z backendu i widok do komponentow tylko dla zalogowanych

frontend/app/src/components/Navbar.vue

@@ -110,7 +110,7 @@ export default {
                 this.snackbarLogout = true
                 this.isLogged = false
                 console.log("wylogowano")
-                window.location.replace("http://localhost:8080");
+                // window.location.replace("http://localhost:8080");
 
             }
             else{

frontend/app/src/router.js

@@ -6,11 +6,28 @@ import Cards from '@/views/Cards'
 import Login from '@/views/Login'
 import Logout from '@/views/Logout'
 import Register from '@/views/Register'
-
+import store from '@/store/store'
 
 
 Vue.use(Router)
 
+const ifNotAuthenticated = (to, from, next) => {
+  if (!store.getters.isAuthenticated) {
+    next()
+    return
+  }
+  next('/')
+}
+
+const ifAuthenticated = (to, from, next) => {
+  if (store.getters.isAuthenticated) {
+    next()
+    return
+  }
+  next('/login')
+}
+
+
 export default new Router({
   mode: 'history',
   base: process.env.BASE_URL,
@@ -18,17 +35,20 @@ export default new Router({
     {
       path: '/game',
       name: 'game',
-      component: Game
+      component: Game,
+      // beforeEnter: ifAuthenticated,
     },
     {
       path: '/dzentelmani',
       name: 'users',
-      component: Users
+      component: Users,
+      // beforeEnter: ifAuthenticated,
     },
     {
       path: '/karty',
       name: 'cards',
-      component: Cards
+      component: Cards,
+      // beforeEnter: ifAuthenticated,
     },
     {
       path: '/register',
@@ -40,10 +60,16 @@ export default new Router({
       name: 'login',
       component: Login
     },
+    // {
+    //   path: '/login', //doylsnie
+    //   name: 'login',
+    //   component: Login
+    // },
     {
       path: '/logout',
       name: 'logout',
-      component: Logout
-    }
+      component: Logout,
+      // beforeEnter: ifNotAuthenticated,
+    },
   ]
 })

frontend/app/src/store/store.js

@@ -14,8 +14,7 @@ export const store = new Vuex.Store({
             // { icon: 'get_app', text: 'Zaloguj', route: '/login'},
             // { icon: 'account_circle', text: 'Rejestracja', route: '/register'},
         ],
-        // userToken : null // na przechoywanie tokena z GO dla usera
-        token: null,
+        token: null, // na przechoywanie tokena z GO dla usera
         user: null
     },
     getters:{

frontend/app/src/views/Cards.vue

@@ -136,7 +136,26 @@ export default {
     //cyklicznie ywkonujaca sie funkcja - do sprawdzania zmian w bazie co 10 s - żeby plynnie wyswietlac nowo dodane karty jesli zmiana zostanie zauwaona
       this.timer = setInterval(this.checkDiference, 10000) //na biezaco aktualizuje dane
 
-  }
+  },
+  created(){
+        //Zbuduje sie tylko i wylacznie wtedy gdy uzytkownik jest zalogowany, w przeciwnym wypadku przekierowuj do zalogowania
+        var local = localStorage.getItem('token');
+        var localU = localStorage.getItem('user');
+
+        console.log("localStorage.getItem('token')" , localStorage.getItem('token'))
+
+        if (localStorage.getItem('token')){
+            this.isLogged = true
+            console.log("TUTAJ: ", localStorage.getItem('token') === null)
+        }
+        else{
+            this.$router.push('/') 
+
+        }
+
+        console.log("LOCAL STOARAGE: ", local)
+        console.log("LOCAL STOARAGE User: ", localU)
+    }
 }
 
 

frontend/app/src/views/Game.vue

@@ -46,6 +46,7 @@
 export default {
     data(){
       return{
+          isLogged : false,
           gentelaman: false,
           cards: [
           { text: 'Te majce mniej niż 180cm wzrostu pocieszne istoty które nazywają siebie mężczyznami'},
@@ -73,10 +74,10 @@ export default {
     },
     methods:{
         chosenCard(){
-            console.log("Wybrano karte")
+            // console.log("Wybrano karte")
         },
         visibleCards(){
-            console.log("Visible cards function")
+            // console.log("Visible cards function")
             if (this.gentelaman===true){
                 return this.cards
             }
@@ -84,6 +85,25 @@ export default {
                 return this.userCards
             }
         }
+    },
+    created(){
+        //Zbuduje sie tylko i wylacznie wtedy gdy uzytkownik jest zalogowany, w przeciwnym wypadku przekierowuj do zalogowania
+        var local = localStorage.getItem('token');
+        var localU = localStorage.getItem('user');
+
+        console.log("localStorage.getItem('token')" , localStorage.getItem('token'))
+
+        if (localStorage.getItem('token')){
+            this.isLogged = true
+            console.log("TUTAJ: ", localStorage.getItem('token') === null)
+        }
+        else{
+            this.$router.push('/') 
+
+        }
+
+        console.log("LOCAL STOARAGE: ", local)
+        console.log("LOCAL STOARAGE User: ", localU)
     }
 }
 </script>

frontend/app/src/views/Login.vue

@@ -71,26 +71,39 @@ export default {
                   
                   if (response.data){
                     console.log("Dostał tokena")
-                    this.$store.commit('LOGIN_SUCCESS', response.data)
                     console.log("DANE Z VUEXA DLA USERA")
-                    console.log(this.$store.state.token) //pokazuje ze zapisał tokena
-                    window.location.replace("http://localhost:8080/game");
+                    localStorage.setItem('token',response.data);
+                    localStorage.setItem('user', JSON.stringify(this.userLogin));
+
+                     
+                    var local = localStorage.getItem('token');
+                    var localU = localStorage.getItem('user');
+
+                    console.log("LOCAL STOARAGE: ", local)
+                    console.log("LOCAL STOARAGE User: ", localU)
+
+                    this.$router.push('game') 
+                    
+                    // router.push({name: "/game"}) //przekierowanie dla one sigle page application  window.location.replace("http://localhost:8080/game");
+
                   }
                   else{ //coś poszło nie tak
                     console.log("Zły lolgin")
                     this.snackbar = true
                     this.userLogin = ''
                     this.userPassword = ''
+                    localStorage.setItem('token',null);
+                    localStorage.setItem('user', null);
                   }
               })  
               .catch(error=>{ 
                 console.log("ERROR: ", error.response.data)
               });
 
-          }//dlugi if
-
-          this.userLogin = ''
-          this.userPassword = ''
+          }else{ //dlugi if
+            this.userLogin = ''
+            this.userPassword = ''
+          }
 
         }
     }

frontend/app/src/views/Logout.vue

@@ -1,3 +1,20 @@
 <template>
     <h1>Wylogowanie</h1>
 </template>
+
+<script>
+export default {
+    data(){
+        return{
+
+        }
+    },
+    methods:{
+        logout() {
+        // remove user from local storage to log user out
+            localStorage.removeItem('user');
+        }
+    }
+}
+
+</script>

frontend/app/src/views/Users.vue

@@ -82,7 +82,27 @@ export default {
   },
   mounted(){
     this.getAllUsers()
-  }
+  },
+  
+  created(){
+        //Zbuduje sie tylko i wylacznie wtedy gdy uzytkownik jest zalogowany, w przeciwnym wypadku przekierowuj do zalogowania
+        var local = localStorage.getItem('token');
+        var localU = localStorage.getItem('user');
+
+        console.log("localStorage.getItem('token')" , localStorage.getItem('token'))
+
+        if (localStorage.getItem('token')){
+            this.isLogged = true
+            console.log("TUTAJ: ", localStorage.getItem('token') === null)
+        }
+        else{
+            this.$router.push('/') 
+
+        }
+
+        console.log("LOCAL STOARAGE: ", local)
+        console.log("LOCAL STOARAGE User: ", localU)
+    }
 }
 </script>