Persistent authentication without any additional storage or cookie datas

@sr57 Thank you for your answer @sr57.

I meant without any additional cookies than those generated by Sanctum.

My configuration seems to be similar to the one from your last link.

Well ... when I log in and navigate, it's ok. Then strangely when I load a specific route typing it directly in the address bar of the browser, instead of loading this route, it reloads the entire page and redirects to the login page.

When I check the cookies, they don't have changed. So I suppose that I'm not logged out, but only redirected to the login page.

I will search why ... perhaps a router problem ? or perhaps something around the .htaccess configuration on the shared hosting ?

@sr57 Here is the content of the headers when I try to load directly the /students route.

https://mydomain.fr/students
Host: mydomain.fr
User-Agent: Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:102.0) Gecko/20100101 Firefox/102.0
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/avif,image/webp,*/*;q=0.8
Accept-Language: fr,fr-FR;q=0.8,en-US;q=0.5,en;q=0.3
Accept-Encoding: gzip, deflate, br
Connection: keep-alive
Cookie: XSRF-TOKEN=... // Here is the token, I just don't show it here
laravel_session=... // Here is the laravel session, I just don't show it here
AIMAwU8PIVeBjyFERCjpUZ3zQ4abFbKHnOTbfV4X=... // I don't know what it is and I just don't show it here
Upgrade-Insecure-Requests: 1
Sec-Fetch-Dest: document
Sec-Fetch-Mode: navigate
Sec-Fetch-Site: none
Sec-Fetch-User: ?1
GET: HTTP/2.0 200 OK
content-type: text/html
date: Sat, 16 Jul 2022 20:47:58 GMT
server: Apache
last-modified: Sat, 16 Jul 2022 18:21:40 GMT
etag: W/"28e-5e3f034be84e5"
content-encoding: gzip
X-Firefox-Spdy: h2

It looks like the API call has been correctly executed, so the problem is perhaps with my vue router.

Do you see something strange in my router configuration ?

import { createRouter, createWebHistory } from 'vue-router'
import store from '../store'

import Home from '../views/Home.vue'
import Login from '../views/Login.vue'
import Students from '../views/students/Students.vue'

const routes = [
  {
    path: '/',
    name: 'home',
    component: Home,
    meta: {
      requiresAuth: true
    }
  },
  {
    path: '/login',
    name: 'login',
    component: Login
  },
  {
    path: '/students',
    name: 'students',
    component: Students,
    meta: {
      requiresAuth: true
    }
  },
  {
    path: '/:pathMatch(.*)*',
    name: 'notfound',
    component: Home
  }
]

const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes
})

export default router

@sr57 I have no error ... the HTTP request has the status 200 ... I see that when I reload the page, it reloads all scripts just after the API call.

I will continue searching tomorrow ;).

@sr57 Hello ... Thank you for your help ;) ... I have solved my problem.

I have added an authenticated flag in the sessionStorage, this helps me to persist the authenticated variable in VueX.

Now when I directly load a route, it refresh VueX with the persisted values and it loads the good component.

Some people would say that it's not very secure (in another post, @martinbean explained why and some other posts in the web share best pratice with that) because I have a flag which can be modified by any user, but my routes are protected by the sanctum middleware. And this flag isn't set when a user is unconnected (only when connected).

I will try later to improve the access to the menu and the routes using ziggy with its filter functionality.