[Vuejs]-Nuxt – login without redirect

by

1👍

✅

You have to set a dynamic layout parameter in your Page.vue files.

first step, set dynamic layout in your Page.vue:

export default {
  layout (context) {
    return context.isLoggedIn ? 'privateLayout' : 'publicLayout';
  }
}

second step, set a Context custom var (or better, in your Store) from a middleware auth:

export default function (context) {
   context.isLoggedIn = true; //or false, insert your auth checking here
}

see documentation: https://nuxtjs.org/api/pages-layout#the-layout-property

see live example: https://glitch.com/edit/#!/nuxt-dynamic-layouts?path=pages/index.vue:10:8

👤Nicolas Pennec

1👍

You can use your index page as a wrapper for two components that show depending on whether the user is logged in. So inside your index.vue:

<template>
  <div class="wrapper">
    <dashboard v-if="userIsLoggedIn" />
    <login v-else />
  </div>
</template>

Then you could write the dashboard and login component as separate pages and even switch dynamically between them by making userIsloggedIn reactive.

Hope that’s more like what you’re looking for.

👤Metaphalo

Leave a comment