Home

Hi,

I have an application with an authentication middleware that redirects user to a login page whenever she tries to access a restricted page. When I click on a link for a first time (from the default layout) then I am redirected to login page with a correct layout, but when I click on the link again (from the login layout), then I am redirected to login page with default layout applied, but it should use login layout.

Simplified version of middleware/auth.js:

export default function ({ route, redirect }) {
  if (route.name === 'secret') {
    redirect('/login');
  }
});

layout/default.vue:

<template>
  <div>
    <p>This is default layout</p>
    <router-link to="secret">Secret</router-link>
  </div>
</template>

layout/login.vue:

<template>
  <div>
    <p>This is login layout</p>
    <router-link to="secret">Secret</router-link>
  </div>
</template>

pages/login.js:

<template>
  <div>This is login page</div>
</template>

<script>
  export default {
    layout: 'login'
  };
</script>

pages/secret.vue:

<template>
  <div>
    <!-- uses default layout -->
    <p>Secret</p>
  </div>
</template>

pages/index.vue:

<template>
  <div>
    <p>Index</p>
  </div>
</template>