Search code examples
servicevuejs3

Why my authentificationService is undefined?


I've one question. I don't understand why, but my services is undefined. Someone could help me to clarify this ?

I've a component "FormLogin" with the call of this service

<script>
import { authenticationService } from '@/container.js'
import { ref } from '@vue/reactivity'

export default {
    emits: ['successfullyLogged'],
    setup (props, context) {
        const errors = ref([])
        const email = ref(null)
        const password = ref(null)

        const submit = () => {
            errors.value = []

            authenticationService()
                .login(email.value, password.value)
                .then(() => {
                    context.emit('successfullyLogged')
                })
                .catch(error => {
                    errors.value = [error.response.data.message]
                })
        }

        return {
            email,
            password,
            errors,
            submit
        }
    }
}
</script>

Then i've the "global injection"

import api from '@/clients/api.js'
import TokenRepository from '@/repositories/TokenRepository.js'
import AuthenticationService from '@/services/AuthenticationService.js'

export function tokenRepository () {
    return new TokenRepository()
}

export function authenticationService () {
    return new AuthenticationService(api, tokenRepository)
}

And after that, the service itself

import store from "@/store"

export default (client, tokenRepository) => {
    const login = (email, password) => {
        return client.post('/oauth/token', {
                grant_type: 'password',
                client_id: process.env.VUE_APP_CLIENT_ID,
                client_secret: process.env.VUE_APP_CLIENT_SECRET,
                username: email,
                password: password
            })
            .then(response => {
                tokenRepository().store(response.data.access_token)
                store.dispatch('account/loadUser')
            })
    }
    
    const logout = () => {
        tokenRepository().destroy()
        store.commit('account/setUser', {})
    }
    
    return {
        login,
        logout
    }
}

But when i run this code, fill my form fields and hit the button "submit", i've this error in console, and i don't undestand why. (And when i try to use the debugger, it appear that authenticationService in FormLogin is undefined.

enter image description here

Thanks in advance for your help, Christophe


Solution

  • So the answer of the problem was to remove the word "new" in my container.js

    Bad answer for me

    export function authenticationService () {
        return new AuthenticationService(api, tokenRepository)
    }
    

    Good answer for me

    export function authenticationService () {
        return AuthenticationService(api, tokenRepository)
    }