adding better authentication system with login

Julien Neuhart · Julien Neuhart · commit d526aad75b61 · 2018-08-17T16:16:14.000+02:00
diff --git a/app/assets/vue/App.vue b/app/assets/vue/App.vue
@@ -13,6 +13,9 @@
                     <router-link class="nav-item" tag="li" to="/posts" active-class="active">
                         <a class="nav-link">Posts</a>
                     </router-link>
+                    <li class="nav-item" v-if="isAuthenticated">
+                        <a class="nav-link" href="/api/security/logout">Logout</a>
+                    </li>
                 </ul>
             </div>
         </nav>
@@ -27,6 +30,12 @@
 
     export default {
         name: 'app',
+        beforeMount () {
+            let vueRouting = this.$parent.$el.attributes['data-vue-routing'].value,
+                queryParameters = JSON.parse(this.$parent.$el.attributes['data-query-parameters'].value);
+
+            router.push({path: vueRouting, query: queryParameters});
+        },
         created () {
             axios.interceptors.response.use(undefined, (err) => {
                 return new Promise(() => {
@@ -37,11 +46,10 @@
                 });
             });
         },
-        beforeMount () {
-            let vueRouting = this.$parent.$el.attributes['data-vue-routing'].value,
-                queryParameters = JSON.parse(this.$parent.$el.attributes['data-query-parameters'].value);
-
-            router.push({path: vueRouting, query: queryParameters});
+        computed: {
+            isAuthenticated () {
+                return this.$store.getters['security/isAuthenticated']
+            },
         },
     }
 </script>
diff --git a/app/assets/vue/api/security.js b/app/assets/vue/api/security.js
@@ -10,7 +10,4 @@ export default {
             }
         );
     },
-    isAuthenticated () {
-        return axios.get('/api/security/is-authenticated');
-    },
 }
diff --git a/app/assets/vue/router/index.js b/app/assets/vue/router/index.js
@@ -21,16 +21,16 @@ router.beforeEach((to, from, next) => {
     if (to.matched.some(record => record.meta.requiresAuth)) {
         // this route requires auth, check if logged in
         // if not, redirect to login page.
-        store.dispatch('security/isAuthenticated')
-            .then(() => {
-                next();
-            })
-            .catch(() => {
-                next({
-                    path: '/login',
-                    query: { redirect: to.fullPath }
-                });
+        console.log(document.cookie);
+        console.log(store.getters['security/isAuthenticated']);
+        if (store.getters['security/isAuthenticated']) {
+            next();
+        } else {
+            next({
+                path: '/login',
+                query: { redirect: to.fullPath }
             });
+        }
     } else {
         next(); // make sure to always call next()!
     }
diff --git a/app/assets/vue/store/security.js b/app/assets/vue/store/security.js
@@ -5,6 +5,7 @@ export default {
     state: {
         isLoading: false,
         error: null,
+        isAuthenticated: false,
     },
     getters: {
         isLoading (state) {
@@ -16,19 +17,26 @@ export default {
         error (state) {
             return state.error;
         },
+        isAuthenticated (state) {
+            state.isAuthenticated = document.cookie.indexOf('authenticated') !== -1;
+            return state.isAuthenticated;
+        },
     },
     mutations: {
         ['AUTHENTICATING'](state) {
             state.isLoading = true;
             state.error = null;
+            state.isAuthenticated = false;
         },
         ['AUTHENTICATING_SUCCESS'](state) {
             state.isLoading = false;
             state.error = null;
+            state.isAuthenticated = true;
         },
         ['AUTHENTICATING_ERROR'](state, error) {
             state.isLoading = false;
             state.error = error;
+            state.isAuthenticated = false;
         },
     },
     actions: {
@@ -38,8 +46,5 @@ export default {
                 .then(() => commit('AUTHENTICATING_SUCCESS'))
                 .catch(err => commit('AUTHENTICATING_ERROR', err));
         },
-        isAuthenticated () {
-            return SecurityAPI.isAuthenticated();
-        },
     },
 }
diff --git a/app/assets/vue/views/Login.vue b/app/assets/vue/views/Login.vue
@@ -59,11 +59,11 @@
 
                 this.$store.dispatch('security/login', payload)
                     .then(() => {
-                       if (typeof redirect !== 'undefined') {
+                        if (typeof redirect !== 'undefined') {
                            this.$router.push({path: redirect});
-                       } else {
+                        } else {
                            this.$router.push({path: '/home'});
-                       }
+                        }
                     });
             },
         },
diff --git a/app/config/packages/framework.yaml b/app/config/packages/framework.yaml
@@ -9,6 +9,7 @@ framework:
     session:
         handler_id: session.handler.native_file
         save_path: '%kernel.project_dir%/var/sessions/%kernel.environment%'
+        gc_maxlifetime: 300
 
     #esi: true
     #fragments: true
diff --git a/app/config/packages/security.yaml b/app/config/packages/security.yaml
@@ -25,6 +25,7 @@ security:
 
             logout:
                 path: /api/security/logout
+                handlers: [app.logout.handler]
 
             logout_on_user_change: true
 
diff --git a/app/config/services.yaml b/app/config/services.yaml
@@ -34,3 +34,6 @@ services:
         class: App\Security\HashPasswordListener
         tags:
         - { name: doctrine.event_subscriber }
+
+    app.logout.handler:
+        class: App\Security\LogoutHandler
diff --git a/app/src/Controller/ApiSecurityController.php b/app/src/Controller/ApiSecurityController.php
@@ -3,9 +3,9 @@
 namespace App\Controller;
 
 use Symfony\Bundle\FrameworkBundle\Controller\Controller;
+use Symfony\Component\HttpFoundation\Cookie;
 use Symfony\Component\HttpFoundation\JsonResponse;
 use Symfony\Component\Routing\Annotation\Route;
-use FOS\RestBundle\Controller\Annotations as Rest;
 
 final class ApiSecurityController extends Controller
 {
@@ -15,7 +15,12 @@ final class ApiSecurityController extends Controller
      */
     public function loginAction(): JsonResponse
     {
-        return new JsonResponse('authenticated!');
+        $securityCookie = new Cookie('authenticated', true, \time() + \intval(\ini_get('session.gc_maxlifetime')), '/', null, false, false);
+
+        $response = new JsonResponse('authenticated!');
+        $response->headers->setCookie($securityCookie);
+
+        return $response;
     }
 
     /**
@@ -26,13 +31,4 @@ public function logoutAction()
     {
         throw new \Exception('This should not be reached!');
     }
-
-    /**
-     * @Rest\Get("/api/security/is-authenticated", name="isAuthenticated")
-     * @return JsonResponse
-     */
-    public function isAuthenticatedAction(): JsonResponse
-    {
-        return $this->isGranted('IS_AUTHENTICATED_FULLY') ? new JsonResponse('authenticated!') : new JsonResponse('not authenticated!', 401);
-    }
 }
diff --git a/app/src/Security/LogoutHandler.php b/app/src/Security/LogoutHandler.php
@@ -0,0 +1,22 @@
+<?php
+
+namespace App\Security;
+
+use Symfony\Component\HttpFoundation\Request;
+use Symfony\Component\HttpFoundation\Response;
+use Symfony\Component\Security\Core\Authentication\Token\TokenInterface;
+use Symfony\Component\Security\Http\Logout\LogoutHandlerInterface;
+
+final class LogoutHandler implements LogoutHandlerInterface
+{
+    /**
+     * @param Request $request
+     * @param Response $response
+     * @param TokenInterface $token
+     * @return void
+     */
+    public function logout(Request $request, Response $response, TokenInterface $token): void
+    {
+        $response->headers->clearCookie('authenticated');
+    }
+}

Original file line number	Diff line number	Diff line change
`@@ -10,7 +10,4 @@ export default {`
`10`	`10`	`}`
`11`	`11`	`);`
`12`	`12`	`},`
`13`		`- isAuthenticated () {`
`14`		`- return axios.get('/api/security/is-authenticated');`
`15`		`- },`
`16`	`13`	`}`
Original file line number	Diff line number	Diff line change
`@@ -3,9 +3,9 @@`
`3`	`3`	`namespace App\Controller;`
`4`	`4`
`5`	`5`	`use Symfony\Bundle\FrameworkBundle\Controller\Controller;`
	`6`	`+use Symfony\Component\HttpFoundation\Cookie;`
`6`	`7`	`use Symfony\Component\HttpFoundation\JsonResponse;`
`7`	`8`	`use Symfony\Component\Routing\Annotation\Route;`
`8`		`-use FOS\RestBundle\Controller\Annotations as Rest;`
`9`	`9`
`10`	`10`	`final class ApiSecurityController extends Controller`
`11`	`11`	`{`
`@@ -15,7 +15,12 @@ final class ApiSecurityController extends Controller`
`15`	`15`	`*/`
`16`	`16`	`public function loginAction(): JsonResponse`
`17`	`17`	`{`
`18`		`- return new JsonResponse('authenticated!');`
	`18`	`+ $securityCookie = new Cookie('authenticated', true, \time() + \intval(\ini_get('session.gc_maxlifetime')), '/', null, false, false);`
	`19`	`+`
	`20`	`+ $response = new JsonResponse('authenticated!');`
	`21`	`+ $response->headers->setCookie($securityCookie);`
	`22`	`+`
	`23`	`+ return $response;`
`19`	`24`	`}`
`20`	`25`
`21`	`26`	`/**`
`@@ -26,13 +31,4 @@ public function logoutAction()`
`26`	`31`	`{`
`27`	`32`	`throw new \Exception('This should not be reached!');`
`28`	`33`	`}`
`29`		`-`
`30`		`- /**`
`31`		`- * @Rest\Get("/api/security/is-authenticated", name="isAuthenticated")`
`32`		`- * @return JsonResponse`
`33`		`- */`
`34`		`- public function isAuthenticatedAction(): JsonResponse`
`35`		`- {`
`36`		`- return $this->isGranted('IS_AUTHENTICATED_FULLY') ? new JsonResponse('authenticated!') : new JsonResponse('not authenticated!', 401);`
`37`		`- }`
`38`	`34`	`}`