Be part of JetBrains PHPverse 2026 on June 9 – a free online event bringing PHP devs worldwide together.

LorienDarenya's avatar

Right side of assignment cannot be destructured?

So, I've Googled until Google was broke (not really, but I'm at my wits' end), and can't seem to pin this error down. It's either in my auth.js (seen below), or in my login.vue (also seen below). The long and short of it is I'm trying to work on a SPA and authentication tutorials are severely out of date. I'm unsure if I updated the code correctly, so please have a look-see and let me know what you think:

Here is auth.js:

export const auth = {
    state:{
        authenticated: false,
        user: {}
    },
    getters: {
        authenticated(state){
            return state.authenticated
        },
        user(state){
            return state.user
        }
    },
    mutations:{
        setAuthenticated (state, value) {
            state.authenticated = value
        },
        setUser (state, value) {
            state.user = value
        }
    },
    actions:{
        login({commit}){
            return axios.get('/api/user').then(({data})=>{
                commit('setUser',data)
                commit('setAuthenticated',true)
                router.push({name:'dashboard'})
            }).catch(({response:{data}})=>{
                commit('setUser',{})
                commit('setAuthenticated',false)
            })
        },
        logout({commit}){
            commit('setUser',{})
            commit('setAuthenticated',false)
        }
    }
}

export default auth

And now my login.vue:

<template>
    <div class="container h-100">
        <div class="row h-100 align-items-center">
            <div class="col-12 col-md-6 offset-md-3">
                <div class="card shadow sm">
                    <div class="card-body">
                        <h1 class="text-center">Login</h1>
                        <hr/>
                        <form action="javascript:void(0)" class="row" method="post">
                            <div class="col-12" v-if="Object.keys(validationErrors).length > 0">
                                <div class="alert alert-danger">
                                    <ul class="mb-0">
                                        <li v-for="(value, key) in validationErrors" :key="key">{{ value[0] }}</li>
                                    </ul>
                                </div>
                            </div>
                            <div class="form-group col-12">
                                <label for="email" class="font-weight-bold">Email</label>
                                <input type="text" v-model="auth.email" name="email" id="email" class="form-control">
                            </div>
                            <div class="form-group col-12 my-2">
                                <label for="password" class="font-weight-bold">Password</label>
                                <input type="password" v-model="auth.password" name="password" id="password" class="form-control">
                            </div>
                            <div class="col-12 mb-2">
                                <button type="submit" :disabled="processing" @click="login" class="btn btn-primary btn-block">
                                    {{ processing ? "Please wait" : "Login" }}
                                </button>
                            </div>
                            <div class="col-12 text-center">
                                <label>Don't have an account? <router-link :to="{name:'register'}">Register Now!</router-link></label>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import { mapActions } from 'vuex'
export default {
    name:"login",
    data(){
        return {
            auth:{
                email:"",
                password:""
            },
            validationErrors:{},
            processing:false
        }
    },
    methods:{
        ...mapActions({
            signIn:'login'
        }),
        async login(){
            this.processing = true
            await axios.get('/sanctum/csrf-cookie')
            await axios.post('/login',this.auth).then(({data})=>{
                this.signIn()
            }).catch(({response})=>{
                if(response.status===422){
                    this.validationErrors = response.data.errors
                }else{
                    this.validationErrors = {}
                    alert(response.data.message)
                }
            }).finally(()=>{
                this.processing = false
            })
        },
    }
}
</script>
``

It should be noted that all I can currently get out of my console is the assignment issue mentioned in the title.
0 likes
7 replies
lbecket's avatar
lbecket
Best Answer
Level 39

Get rid of the curly braces around {commit} and {data}

LorienDarenya's avatar

@lbecket This worked beautifully once I added context to the actions declarations. However, it's still not logging the user in. I am using Valet and the latest of everything Laravel, Vue, Vuex, etc. Thank you so much for your help!

LorienDarenya's avatar

@lbecket I forgot to note that there is no console errors now when I view my javascript. Which, again, is great, but also disorienting.

lbecket's avatar

@LorienDarenya I'm afraid that I don't understand what you're trying to do here. It looks like you're setting a state variable authenticated, but it's not clear what, if anything, that does. I also don't understand why you are trying to use vuex for authentication when Laravel already takes care of this so easily.

The Laravel docs describe authentication pretty clearly: https://laravel.com/docs/master/authentication

If you follow along I would expect that you should have authentication working in a matter of minutes. Don't try to reinvent the wheel.

LorienDarenya's avatar

Further to my issue, the api/user route is returning html, not json. I'm a bit thrown here.

lbecket's avatar

@LorienDarenya You haven't shared the code related to your api/user route and so I can't really say why that would be the case. Regardless, that's getting into a different topic. I highly recommend that you follow the authentication protocol outlined in the documentation. There are numerous configurations, each described in detail, and so I'm sure that you will be able to find one to meet your need.

LorienDarenya's avatar

@lbecket Thank you for replying. I have been through the documentation several times. My major issue was not getting a console error of any sort. However, you are right, this is blossoming into a new topic so if I need I will start a new one once I have reviewed the material yet again. Again, thanks so much for your help!

Please or to participate in this conversation.