Frontend API

We have to create Laravel APIs before testing the frontend API Call.

We have implemented login method in our AuthLogin.vue component file. You can find this file here: resources/ts/views/authentication/AuthLogin.vue

async function login() {
  try {
    const res = await $api('/auth/login', {
      method: 'POST',
      body: {
        email: credentials.value.email,
        password: credentials.value.password,
      },
    })

    const { accessToken, userData, userAbilityRules } = res

    useCookie('userAbilityRules').value = userAbilityRules
    ability.update(userAbilityRules)

    useCookie('userData').value = userData
    useCookie('accessToken').value = accessToken

    // Redirect to `to` query if exists, otherwise redirect to index route
    await router.replace(route.query.to ? String(route.query.to) : '/dashboards/default')
  }
  catch (error) {
  // Handle errors
    console.error(error)
    errors.value.apiError = 'Invalid email or password' // Set error message for invalid credentials
  }
}