Vue Router on a Laravel API

You log in, refresh, and the router kicks you back to /login even though the session is fine. The guard ran before the app knew who you were. Here is Vue Router for a separate Laravel SPA, with the user loaded before the first navigation.

The separate app is the case Sanctum’s cookie flow is for. Axios, the CSRF cookie, and withCredentials stay in Authenticate a Vue SPA with Laravel Sanctum. This page only adds the URLs. Client-only state inside an Inertia app is Pinia, which is a different file than the store below.

The routes#

npm install vue-router

Vue Router 4 is createRouter and createWebHistory. Two routes are enough to see the guard: /login is for guests, and / requires a user.

import { createRouter, createWebHistory } from "vue-router";
import Login from "./pages/Login.vue";
import Posts from "./pages/Posts.vue";

export const router = createRouter({
  history: createWebHistory(),
  routes: [
    {
      path: "/login",
      name: "login",
      component: Login,
      meta: { guest: true },
    },
    {
      path: "/",
      name: "posts",
      component: Posts,
      meta: { auth: true },
    },
  ],
});

Load the user first#

router.beforeEach that runs before you know who is logged in sends a valid session to /login on the first paint. Call GET /api/user on the credentialed api client from the Sanctum guide and wait. A plain Axios import does not send the session cookie to another origin. A 401 means there is no session, so the store user stays null. Any other error is a failed API, not a logged-out user.

import { defineStore } from "pinia";
import { ref } from "vue";
import axios from "axios";
import { api } from "../api";

export const useAuth = defineStore("auth", () => {
  const user = ref(null);

  async function load() {
    try {
      user.value = (await api.get("/api/user")).data;
    } catch (error) {
      if (axios.isAxiosError(error) && error.response?.status === 401) {
        user.value = null;
        return;
      }

      throw error;
    }
  }

  return { user, load };
});

Mount only after that call. The guard is registered before mount, so the first navigation already knows the answer.

import { createApp } from "vue";
import { createPinia } from "pinia";
import App from "./App.vue";
import { router } from "./router";
import { useAuth } from "./stores/auth";

async function boot() {
  const app = createApp(App);
  const pinia = createPinia();
  app.use(pinia);

  const auth = useAuth();
  await auth.load();

  router.beforeEach((to) => {
    if (to.meta.auth && !auth.user) {
      return { name: "login" };
    }

    if (to.meta.guest && auth.user) {
      return { name: "posts" };
    }
  });

  app.use(router);
  app.mount("#app");
}

boot();

After login#

The login POST itself is the Sanctum article: CSRF cookie, then credentials, with credentials included. That POST returns no content. Load the account with currentUser() from that same client, write it into the store, and move.

window.location.assign("/");

auth.user = await currentUser();
await router.push({ name: "posts" });

Do not window.location assign. The router is the reason this page exists.

import { useRouter } from "vue-router";
import { useAuth } from "../stores/auth";
import { currentUser } from "../api";

const router = useRouter();
const auth = useAuth();

auth.user = await currentUser();
await router.push({ name: "posts" });

A third party with its own client id is not this router. That decision is Sanctum or Passport. OAuth’s redirect lives on the other product’s server. Your first-party SPA keeps the cookie and these two routes.

Recap#

• Vue Router is for a separate SPA; Inertia apps keep Laravel routes.
• Guest and auth routes via meta and one beforeEach guard.
• Load the user before the router runs; treat only 401 as logged out.
• Use the credentialed client for every call.

FAQ#

Next steps#

• Authenticate a Vue SPA with Laravel Sanctum
• Pinia with Laravel and Inertia
• Deploy a Laravel + Vue app

Sources#

• Vue Router: Navigation guards
• Vue Router: HTML5 mode server configuration
• Laravel 13: Sanctum, SPA authentication