Click here to Skip to main content
15,902,032 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
How i can resolve my login form in Vue. I used lot of methods but I have token which make problem. Here is the code:

import {createStore} from "vuex";
import * as actions from "./actions";
import * as mutations from "./mutations";

const store=createStore({
    state:{
        user:{
            token: sessionStorage.getItem('TOKEN'),
            data:{}
        }
    },
    getters:{},
    actions,
    mutations,
})

export default store



This second part is the problem for sending token above

<template>
    <GuestLayout title="Sign into your account">
            <form class="mt-8 space-y-6"  method="POST" @submit.prevent="login">
                <input type="hidden" name="remember" value="true" />
                <div class="-space-y-px rounded-md shadow-sm">
                    <div>
                        <label for="email-address" class="sr-only">Email address</label>
                        <input id="email-address" name="email" type="email" autocomplete="email" required="" v-model="user.email" class="relative block w-full appearance-none rounded-none rounded-t-md border border-gray-300 px-3 py-2 text-gray-900 placeholder-gray-500 focus:z-10 focus:border-indigo-500 focus:outline-none focus:ring-indigo-500 sm:text-sm" placeholder="Email address" />
                    </div>
                    <div>
                        <label for="password" class="sr-only">Password</label>
                        <input id="password" name="password" type="password" autocomplete="current-password" required="" v-model="user.password" class="relative block w-full appearance-none rounded-none rounded-b-md border border-gray-300 px-3 py-2 text-gray-900 placeholder-gray-500 focus:z-10 focus:border-indigo-500 focus:outline-none focus:ring-indigo-500 sm:text-sm" placeholder="Password" />
                    </div>
                </div>

                <div class="flex items-center justify-between">
                    <div class="flex items-center">
                        <input id="remember-me" name="remember-me" type="checkbox" v-model="user.remember" class="h-4 w-4 rounded border-gray-300 text-indigo-600 focus:ring-indigo-500" />
                        <label for="remember-me" class="ml-2 block text-sm text-gray-900">Remember me</label>
                    </div>

                    <div class="text-sm">
                        <router-link :to="{name:'requestPassword'}" class="font-medium text-indigo-600 hover:text-indigo-500">Forgot your password?</router-link>
                    </div>
                </div>

                <div>
                    <button type="submit" class="group relative flex w-full justify-center rounded-md border border-transparent bg-indigo-600 py-2 px-4 text-sm font-medium text-white hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2">
            
              <LockClosedIcon class="h-5 w-5 text-indigo-500 group-hover:text-indigo-400" aria-hidden="true" />
            
                        Sign in
                    </button>
                </div>
            </form>
    </GuestLayout>
</template>

<script setup>
import {ref} from 'vue'
import { LockClosedIcon } from '@heroicons/vue/24/solid'
import GuestLayout from '../components/GuestLayout.vue'
import store from "@/store";
import router from "@/router";

let loading=ref(false);
let errorMsg=ref("");

const user={
    email:'',
    password:'',
    remember:false
}
function login(){
    loading.value=true;
    store.dispatch('login',user)
        .then(()=>{
            loading.value=false;
            router.push({name:'app.dashboard'})
        })
        .catch(({response})=>{
            loading.value=false;
            errorMsg.value=response.data.message;
        })
}

</script>


What I have tried:

Everything but nothing happened
Posted

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900