# AuthenticationStates

# Example

<template>
  <AuthenticationStates @authentication-state-changed="handleAuthenticationStateChanged">
    <template #logo>
      <div class="u-txt-c u-mb">
        <img :alt="$t('login.images.logo.alt')" class="page-login__logo" src="../../static/theme/logo.png" />
      </div>
    </template>
  </AuthenticationStates>
</template>

<script>
import { useLogin, useContext, AuthenticationStates, AUTH_STATE_VALID } from '@jdi/vue-backoffice-library'

export default {
  components: {
    AuthenticationStates
  },
  setup(_, context) {
    const { route, router } = useContext(context)
    const { handleAfterLogin } = useLogin({ route, router })

    return {
      handleAfterLogin
    }
  },
  methods: {
    handleAuthenticationStateChanged(state) {
      // Redirect
      if (state === AUTH_STATE_VALID) {
        this.handleAfterLogin()
      }
    }
  }
}
</script>