'How properly create Laravel + vue CRUD using Sanctum?

I am trying create CRUD using Laravel 8 + Sanctum and Vue3 + Vuex3. I used a lot of tutorials but nothing work as I expected.

The most incomprehensible thing for me is Sanctum and error: "unauthorization"

Look at my login function in Login component:

async login() {
            await axios.get('/sanctum/csrf-cookie')
            await axios.post('/api/login', this.form).then((response) => {
                this.signIn(response.data)
            }).catch((response) => {
                this.responseText = 'Niepoprawny e-mail lub hasło.'
            })
        },

Vuex auth

mutations: {
        SET_TOKEN(state, value) {
            state.token = 'Bearer '+value
        },
        SET_AUTHENTICATED(state, value) {
            state.authenticated = value
        },
        SET_USER(state, value) {
            state.user = value
        }
    },
    actions: {
        login({commit}, data) {
            commit('SET_TOKEN', data.access_token)
            commit('SET_USER', data.user)
            commit('SET_AUTHENTICATED', true)

            router.push({ name: 'Dashboard' })
        },
        logout({commit}) {
            commit('SET_USER', {})
            commit('SET_AUTHENTICATED', false)

            router.push({ name: 'Login' })
        }
    }

Now, after successed login I want to go to Dashboard and see users list. Dashboard component:

async getUsers() {
            await axios.get('/sanctum/csrf-cookie')
            await axios.get('/api/dashboard/users',
            ).then(response => {
                this.users = response.data;
            }).catch((response) => {
                alert(response)
            });
        },

And here I have sanctum error. But! Trying to fix that I using token, which I got during login, as a header to axios:

async getUsers() {
            const config = {
                headers: { Authorization: this.token }
            };
            // await axios.get('/sanctum/csrf-cookie')
            await axios.get('/api/dashboard/users', config
            ).then(response => {
                this.users = response.data;
            }).catch((response) => {
                alert(response)
            });
        },

And everything started works. Why? Why all tutorials with sanctum have only axios.get /sanctum/scrf-cookie when it doesn't work? What Do I wrong? If I have to get token from database after login, Should I use sanctum? I have big problem to understand that.

My api Laravel router:

Route::post('register', [AuthController::class, 'register']);
Route::post('login', [AuthController::class, 'login']);
Route::post('password', [AuthController::class, 'resetPassword']);
// get or post? i don't send anything
Route::post('logout', [AuthController::class, 'logout']);

Route::middleware('auth:sanctum')->group(function () {
    Route::prefix('/')->group(function () {
        Route::get('', [HomeController::class, 'index']);
    });
    Route::prefix('/dashboard')->group(function () {
        Route::get('', [DashboardController::class, 'index']);
        Route::get('/users', [UserController::class, 'index']);
    });

    Route::put('/user', [UserController::class, 'store']);
    Route::delete('/user/{id}', [UserController::class, 'destroy']);
});

Vue router:

const Routes = [
    {
        name: 'Login',
        path: '/login',
        component: Login,
        meta: {
            middleware: "guest",
            title: "Login"
        }
    },
   {
        name: 'Home',
        path: '/',
        component: Home,
        meta: {
            middleware: "auth",
            title: "Home"
        },
    },
    {
        name: 'Dashboard',
        path: '/dashboard',
        component: Dashboard,
        meta: {
            middleware: "auth",
            title: "Dashboard"
        },
    },
...

Also I set cors, sanctum config and set SESSION_DRIVER etc.

.env:

SESSION_DRIVER=cookie 
SESSION_DOMAIN=localhost
SANCTUM_STATEFUL_DOMAINS=localhost:8000

cors.php

'paths' => [
        'api/*',
        '/login',
        '/logout',
        '/sanctum/csrf-cookie'
    ],

    'allowed_methods' => ['*'],

    'allowed_origins' => ['*'],

    'allowed_origins_patterns' => [],

    'allowed_headers' => ['*'],

    'exposed_headers' => [],

    'max_age' => 0,

    'supports_credentials' => true,

sanctum.php

 'stateful' => explode(',', env('SANCTUM_STATEFUL_DOMAINS', 'localhost')),

 'guard' => ['web'],

Can someone could help me to understand that?

Greetings



Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source