Passing logged-in user credentials from twig to vue.

assets/js/pages/booklisting.vue

@@ -52,6 +52,7 @@ export default {
   },
   computed: {
     ...mapState('booksmodule', ['books']),
+    ...mapState('usermodule', ['user']),
   },
   methods: {
     ...mapActions('booksmodule', [
@@ -62,7 +63,7 @@ export default {
       this.findAll(this.searchTerm);
     },
     updateHistory: function () {
-      if (history.pushState) {
+      if (this.searchTerm && history.pushState) {
         let url = window.location.protocol + "//" + window.location.host + window.location.pathname + '?search=' + this.searchTerm;
         window.history.pushState({path: url}, '', url);
       }

assets/js/store/modules/usermodule.js

@@ -4,6 +4,7 @@ import {
     LOGIN_SUCCESS,
     LOGIN_ERROR,
     STORE_USER_INFO,
+    LOGIN_STOP,
 } from '../mutation-types.js'
 
 export default {
@@ -11,7 +12,7 @@ export default {
     state: {
         isLoading: false,
         error: null,
-        user: null,
+        user: window.user,
         userUri: null,
     },
     getters: {
@@ -36,6 +37,9 @@ export default {
             state.error = null;
             state.userUri = userUri;
         },
+        [LOGIN_STOP](state, userUri) {
+            state.isLoading = false;
+        },
         [STORE_USER_INFO](state, user) {
             state.isLoading = false;
             state.error = null;
@@ -60,8 +64,6 @@ export default {
                     dispatch('getUserInfo', response.headers.location)
                     commit(LOGIN_SUCCESS, response.headers.location);
                     //this.$emit('user-authenticated', userUri);
-                    //this.email = '';
-                    //this.password = '';
                 }).catch(error => {
                     if (error.response.data.error) {
 
@@ -70,7 +72,7 @@ export default {
                     }
 
                 }).finally(() => {
-                    // this.isLoading = false;
+                    commit(LOGIN_STOP);
                 })
         },
         async getUserInfo({commit}, userUri) {

assets/js/store/mutation-types.js

@@ -13,5 +13,6 @@ export const
     LOGIN_START = "LOGIN_START",
     LOGIN_SUCCESS = "LOGIN_SUCCESS",
     LOGIN_ERROR = "LOGIN_ERROR",
+    LOGIN_STOP = "LOGIN_STOP",
     STORE_USER_INFO = "STORE_USER_INFO"
 ;

src/Entity/User.php

@@ -7,8 +7,12 @@ use App\Repository\UserRepository;
 use Doctrine\ORM\Mapping as ORM;
 use Symfony\Component\Security\Core\User\PasswordAuthenticatedUserInterface;
 use Symfony\Component\Security\Core\User\UserInterface;
+use Symfony\Component\Serializer\Annotation\Groups;
 
-#[ApiResource]
+#[ApiResource(collectionOperations: [
+    "get",
+    "post" => ["security" => "is_granted('ROLE_USER')"]
+], normalizationContext: ['groups' => ['user:read']])]
 #[ORM\Entity(repositoryClass: UserRepository::class)]
 #[ORM\Table(name: '`user`')]
 class User implements UserInterface, PasswordAuthenticatedUserInterface
@@ -19,9 +23,11 @@ class User implements UserInterface, PasswordAuthenticatedUserInterface
     private $id;
 
     #[ORM\Column(type: 'string', length: 180, unique: true)]
+    #[Groups('user:read')]
     private $email;
 
     #[ORM\Column(type: 'json')]
+    #[Groups('user:read')]
     private $roles = [];
 
     #[ORM\Column(type: 'string')]
@@ -51,7 +57,7 @@ class User implements UserInterface, PasswordAuthenticatedUserInterface
      */
     public function getUserIdentifier(): string
     {
-        return (string) $this->email;
+        return (string)$this->email;
     }
 
     /**

src/Twig/AppExtension.php

@@ -5,6 +5,8 @@ namespace App\Twig;
 
 use App\Form\SearchType;
 use Symfony\Component\Form\FormFactoryInterface;
+use Symfony\Component\Security\Core\Authentication\Token\Storage\TokenStorageInterface;
+use Symfony\Component\Serializer\SerializerInterface;
 use Twig\Extension\AbstractExtension;
 use Twig\TwigFilter;
 use Twig\TwigFunction;
@@ -12,11 +14,18 @@ use Twig\TwigFunction;
 class AppExtension extends AbstractExtension
 {
 
-    private $formFactory;
+    private FormFactoryInterface $formFactory;
+    private SerializerInterface $serializer;
+    private TokenStorageInterface $tokenStorage;
 
-    public function __construct(FormFactoryInterface $formFactory)
+    public function __construct(
-    {
+        FormFactoryInterface $formFactory,
+        SerializerInterface $serializer,
+        TokenStorageInterface $tokenStorage
+    ) {
         $this->formFactory = $formFactory;
+        $this->serializer = $serializer;
+        $this->tokenStorage = $tokenStorage;
     }
 
     public function getFunctions()
@@ -24,6 +33,7 @@ class AppExtension extends AbstractExtension
         return [
             new TwigFunction('file_exists', [$this, 'file_exists']),
             new TwigFunction('render_search_form', [$this, 'render_search_form']),
+            new TwigFunction('get_user', [$this, 'get_user']),
         ];
     }
 
@@ -50,4 +60,9 @@ class AppExtension extends AbstractExtension
     {
         return $this->formFactory->create(SearchType::class)->createView();
     }
+
+    public function get_user()
+    {
+        return $this->serializer->serialize($this->tokenStorage->getToken()?->getUser(), 'jsonld');
+    }
 }

templates/base.html.twig

@@ -5,7 +5,9 @@
     <title>{% block title %}Welcome!{% endblock %}</title>
     <link rel="icon"
           href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 128 128%22><text y=%221.2em%22 font-size=%2296%22>📔</text></svg>">
-
+    <script>
+        window.user = {{ get_user() | raw }};
+    </script>
     {% block stylesheets %}
         {{ encore_entry_link_tags('app') }}
     {% endblock %}