Как защитить приложение и использовать учетные данные Symfony Auth в Symfony + VueJs SPA

Question

Я реализовал приложение на платформе API с помощью Symfony4 + GraphQl + axios + vuejs;все это работает как SPA, который использует одно действие контроллера для визуализации шаблона, и оттуда весь маршрутизатор обрабатывается vue-router.Пока все хорошо.

Когда я собираюсь защитить приложение (обычный способ Symfony), все работает нормально, вот конфиг

security:
    role_hierarchy:
        ROLE_ADMIN:       ROLE_USER
        ROLE_SUPER_ADMIN: [ ROLE_USER, ROLE_ADMIN, ROLE_ALLOWED_TO_SWITCH ]

    encoders:
        Symfony\Component\Security\Core\User\User: plaintext
        App\Entity\User:
            algorithm: bcrypt

    providers:

        in_memory:
            memory:
                users:
                    administrador: { password: p@ssw0rd, roles: [ 'ROLE_USER' ] }

    firewalls:
        dev:
            pattern: ^/(_(profiler|wdt)|css|images|js)/
            security: false

        tempapi: #this should not be configured 
            pattern: ^/api
            security: false

        memory:
            pattern: ^/
            logout: true
            anonymous: true
            provider: in_memory
            form_login:
                login_path: /login
                check_path: /login

    access_control:
        - { path: ^/login, roles: IS_AUTHENTICATED_ANONYMOUSLY }
        - { path: ^/, roles: ROLE_USER }

Я думаю, что все хорошо настроено, ноКогда я комментирую брандмауэр tempapi и регистрируюсь, я не могу получить доступ к API, все, что я получаю, это перенаправление на страницу входа.Обратите внимание, что я обращаюсь к API из представления за брандмауэром, поэтому я ожидал, что он будет вести себя как обычный запрос ajax (потому что он есть).

Когда я удаляю комментарий и оставляю брандмауэр tempapi без защиты, яЯ могу получить доступ к API, но у меня нет доступа к учетным данным, ролям и т. д. зарегистрированного пользователя.

Настройка apollo для использования конечной точки graphql

const httpLink = new HttpLink({
  uri: '/api/graphql'
})

const cache = new InMemoryCache()

export default new ApolloClient({
  link: httpLink,
  cache,
  connectToDevTools: true
})

настройка axios для доступа к конечной точке отдыха

export const backend = axios.create({
  baseURL: '/api',
  headers: {
    'Content-Type': 'application/json'
  }
})

Почему Symfony работает с асинхронными запросами, выполняемыми за аутентифицированным межсетевым экраном, поскольку они были внешними?У меня нет проблем с CORS

Заранее спасибо!