RoxanneSkywalker OP Posted 32 minutes ago Achievement Unlocked: Ten Thousand Strong Badge How can I implement a redirect to the login page when a user is not authenticated in Vue 3 with Laravel as the backend? Hey there,
I am seeking guidance on how to redirect a user to the login page if they are not authenticated while using Vue 3 as the front end and Laravel as the back end. My frontend is developed using Vue 3 separately, whereas my backend utilizes Laravel.
Below is an excerpt from my router/index.js file:
import {createRouter, createWebHistory} from "vue-router";
import Dashboard from "../views/admin/Dashboard.vue";
import Home from "../views/Home.vue";
import Login from "../views/Login.vue";
import Register from "../views/Register.vue";
import Unauthorized from "../views/Unauthorized.vue";
import Users from "../views/admin/manage-user/Users.vue";
import Roles from "../views/admin/manage-user/Roles.vue";
import Permissions from "../views/admin/manage-user/Permissions.vue";
// More code here
In addition, here's an overview of my store/auth.js file:
import {defineStore} from "pinia";
import axios from "axios";
// More code here
Lastly, let me share a snippet from my Dashbaord.vue component:
<script setup>
import {onMounted} from "vue";
import {useAuthStore} from "../../stores/auth.js";
import DashboardLayout from "../../layouts/DashboardLayout.vue";
const authStore = useAuthStore();
// More code here
</script>
<template>
<DashboardLayout>
// More code here
</template>
Please note that my application integrates Vue with Pinia, and it operates as two separate entities with Vue managing the front end and Laravel handling the backend processes.