我正在使用 Laravel 制作 API,我正在构建登录系统。当我尝试获取已登录的用户时,当登录似乎有效时,我收到 401 错误。这是我的 vuex 模块,我可以在其中执行登录用户的操作:
import axios from '@/api';
export default {
namespaced: true,
state: {
user: null
},
mutations: {
SET_USER(state, user) {
state.user = user;
}
},
actions: {
login({dispatch}, credentials) {
axios.get('/sanctum/csrf-cookie').then(() => {
axios.post('/api/auth/login', credentials).then(() => {
dispatch('getUser');
});
});
},
getUser({commit}) {
axios.get('/api/user').then((res) => {
commit('SET_USER', res.data);
}).catch((err) => {
commit('SET_USER', null);
console.log(err)
});
}
},
}
这是我从模块映射动作和状态的组件:
<template>
<div class="login_container">
<h1 v-if="$store.state['login/user'] != null">
{{$store.state['login/user'].name}}
</h1>
<form @submit.prevent="login(form)" class="login_form">
<div class="form-group">
<label for="email">Correo electrónico</label>
<input type="email" class="login_email" id="email" v-model="form.email">
</div>
<div class="form-group">
<label for="password">Contraseña</label>
<input type="password" class="login_password" id="password" v-model="form.password">
</div>
<div class="form-group">
<button class="login_submit">Iniciar sesión</button>
</div>
</form>
</div>
</template>
<script>
import {mapActions, mapState} from 'vuex';
export default {
name: "Login",
data() {
return {
form: {
email: '',
password: ''
},
...mapState('login', ['user'])
}
},
methods: {
...mapActions('login', ['login']),
}
}
</script>
这是我的 Laravel 项目中的 api 路由:
route::group(['middleware' => 'auth:sanctum'], function () {
route::get('/user', function (Request $request) {
return $request->user();
});
});
route::post('/auth/register', [\App\Http\Controllers\AuthController::class, 'register']);
route::post('/auth/login', [\App\Http\Controllers\AuthController::class, 'login']);
route::post('/auth/logout', [\App\Http\Controllers\AuthController::class, 'logout']);
还有我的登录功能:
public function login(Request $request)
{
$credentials = $request->only('email', 'password');
if (\Auth::attempt($credentials)) {
return response(auth()->user());
} else {
return response('ERROR');
}
}