To achieve conditional layouts in a Laravel + Vue project based on whether the user is logged in or not, you can follow these steps:
-
Create Two Layout Components: Create two different Vue components for your layouts, one for authenticated users and one for guests.
-
Use Vue Router with Meta Fields: Use Vue Router to define routes and add meta fields to specify which layout to use.
-
Check Authentication Status: Use a global navigation guard in Vue Router to check the user's authentication status and dynamically set the layout.
Here’s a step-by-step solution:
Step 1: Create Layout Components
Create two layout components, e.g., AuthLayout.vue and GuestLayout.vue.
<!-- AuthLayout.vue -->
<template>
<div>
<header>Authenticated Header</header>
<main>
<router-view></router-view>
</main>
<footer>Authenticated Footer</footer>
</div>
</template>
<script>
export default {
name: 'AuthLayout',
};
</script>
<!-- GuestLayout.vue -->
<template>
<div>
<header>Guest Header</header>
<main>
<router-view></router-view>
</main>
<footer>Guest Footer</footer>
</div>
</template>
<script>
export default {
name: 'GuestLayout',
};
</script>
Step 2: Define Routes with Meta Fields
Define your routes in router/index.js and use meta fields to specify the layout.
import Vue from 'vue';
import Router from 'vue-router';
import AuthLayout from '@/layouts/AuthLayout.vue';
import GuestLayout from '@/layouts/GuestLayout.vue';
import Home from '@/views/Home.vue';
import Login from '@/views/Login.vue';
Vue.use(Router);
const routes = [
{
path: '/',
component: Home,
meta: { layout: 'auth' },
},
{
path: '/login',
component: Login,
meta: { layout: 'guest' },
},
];
const router = new Router({
mode: 'history',
routes,
});
export default router;
Step 3: Use a Global Navigation Guard
In your main App.vue or a similar entry point, use a global navigation guard to dynamically set the layout based on the user's authentication status.
<template>
<component :is="layout">
<router-view></router-view>
</component>
</template>
<script>
import AuthLayout from '@/layouts/AuthLayout.vue';
import GuestLayout from '@/layouts/GuestLayout.vue';
import router from './router';
export default {
name: 'App',
data() {
return {
layout: GuestLayout,
};
},
created() {
router.beforeEach((to, from, next) => {
const isAuthenticated = !!localStorage.getItem('authToken'); // Replace with your auth logic
if (to.meta.layout === 'auth' && !isAuthenticated) {
next('/login');
} else if (to.meta.layout === 'guest' && isAuthenticated) {
next('/');
} else {
this.layout = to.meta.layout === 'auth' ? AuthLayout : GuestLayout;
next();
}
});
},
};
</script>
Step 4: Authentication Logic
Ensure you have a way to check if the user is authenticated. This example uses localStorage to store an authentication token, but you should replace it with your actual authentication logic.
Conclusion
By following these steps, you can conditionally render different layouts based on the user's authentication status in a Laravel + Vue project. This approach keeps your layouts persistent and avoids the need for multiple routes for the same content.
