Be part of JetBrains PHPverse 2026 on June 9 – a free online event bringing PHP devs worldwide together.

sanjayacloud's avatar

How to redirect to login page if user not authenticate in vue 3 and Laravel as backend

Hi,

I want to know how can i redirect user to login if user not authenticate in vue 3 with Laravel as backend. I am use vue 3 as front end separately. And I use Laravel as backend.

Here is 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";


const routes = [
    {
        path: '/',
        name: "Home",
        component: Home,
        meta: {
            authRequired: 'false',
        },
    },
    {
        path: '/admin',
        children:[
            {path: 'dashboard', name: "Dashboard", component: Dashboard},
            {path: 'users', name: "Users", component: Users},
            {path: 'roles', name: "Roles", component: Roles},
            {path: 'permissions', name: "Permissions", component: Permissions},
        ],
        meta: {

        },
    },
    {
        path: '/login',
        name: "Login",
        component: Login,
        meta: {

        },
    },
    {
        path: '/register',
        name: "Register",
        component: Register,
        meta: {

        },
    },
    {
        path: '/unauthorized',
        name: 'Unauthorized',
        component: Unauthorized,
        meta: {

        },
    }
];

const router = createRouter( {
   history: createWebHistory(),
   routes,
});


export default router;

Here if my store/auth.js file

import {defineStore} from "pinia";
import axios from "axios";

export const useAuthStore = defineStore("auth", {
    state: () => ({
        authUser: null,
        authErrors: [],
        authStatus: null,
        userRoles: null,
        userPermissions: null,
    }),

    getters: {
        user: (state) => state.authUser,
        errors: (state) => state.authErrors,
        status: (state) => state.authStatus,
        user_roles: (state) => state.userRoles,
        user_permissions: (state) => state.userPermissions,
    },
    actions: {
        async getToken() {
            await axios.get('/sanctum/csrf-cookie');
        },
        async getUser() {
            await  this.getToken();
            const data = await axios.get('/api/user');
            this.authUser = data.data;
            this.userRoles = data.data.roles;
            this.userPermissions = data.data.permissions;
        },

        async handleLogin (data)  {
            this.authErrors = [];
            await this.getToken();
            try {
                await axios.post('/api/login',{
                    email: data.email,
                    password: data.password,
                });
                this.router.push('/admin/dashboard');

            } catch (error) {
                if (error.response.status === 422){
                    this.authErrors = error.response.data.errors;
                }
            }
        },

        async handleRegister  (data) {
            this.authErrors = [];
            await this.getToken();
            try {
                await axios.post('/api/register', {
                    name: data.name,
                    email: data.email,
                    password: data.password,
                    password_confirmation: data.password_confirmation,
                });
                this.router.push("/");

            } catch (error) {
                if (error.response.status === 422){
                    this.authErrors = error.response.data.errors;
                }
            }
        },

        async handleLogout () {
            await axios.post('logout');
            this.authUser = null;
            this.router.push('/login');
        },

        async handleForgotPassword(email) {

            this.authErrors = [];
            await this.getToken();

            try {
                const response = await axios.post('forgot-password', {
                    email: email,
                });
                this.authStatus = response.data.status;
            } catch (error) {
                if (error.response.status === 422){
                    this.authErrors = error.response.data.errors;
                }
            }
        },

        async handleResetPassword(resetData) {
            this.authErrors = [];

            try {

                const response =  await axios.post('reset-password', resetData);
                this.authStatus = response.data.status;
            } catch (error) {
                if (error.response.status === 422){
                    this.authErrors = error.response.data.errors;
                }
            }
        },

    },
});

Anyone have any idea?

0 likes
2 replies

Please or to participate in this conversation.