'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 |
|---|
