Я хочу использовать React с Sanctum. В Sanctum я сгенерировал токен и возвращаю его после входа в систему, и он работает правильно. Однако после входа в систему я вижу свой токен в консоли, но если я хочу открыть маршрут для вошедших пользователей, я должен отправить этот токен в заголовке. Как лучше всего это сделать?
public function login(Request $request)
{
$attr = $request->validate([
'email' => 'required|string|email|',
'password' => 'required|string|min:6'
]);
if (!Auth::attempt($attr)) {
return $this->error('Credentials not match', 401);
}
return response()->json([
'access_token' => auth()->user()->createToken('auth_token')->plainTextToken,
'token_type' => 'Bearer',
]);
}
И войдите в React.
function Login () {
const emailRef = useRef(),
passwordRef = useRef();
const handleSubmit = (event) => {
event.preventDefault();
axios.post('http://localhost:8000/api/auth/login', { email: emailRef.current.value, password: passwordRef.current.value })
.then(res => {
console.log(res);
}).catch((error) => {
console.log(error)
});
}
return(
// Here is my form
);
}
@Edit
Я не уверен, что хорошо понимаю, но это не работает. Если я попытаюсь получить адрес, который нужно авторизовать, у меня будет статус 401. я делаю экземпляр instance.php
import axios from 'axios'
let instance = axios.create({
baseURL: 'http://localhost:8000',
headers: {
common: {
'X-Requested-With': 'XMLHttpRequest',
}
},
withCredentials: true,
});
export default instance;
И я вхожу в систему как пользователь. В React это выглядит так
instance.post('/api/auth/login', {
email: emailRef.current.value,
password: passwordRef.current.value
}).then(res => {
console.log(res);
})
В целом это работает. Я хочу добавить что-то, что нужно авторизовать.
instance.get('/api/me')
.then(res => {
console.log(res.data.data.token);
}).catch((error) => {
console.log(error)
});
А в Api.php это выглядит так
Route::post('/auth/register', [AuthController::class, 'register']);
Route::post('/auth/login', [AuthController::class, 'login']);
Route::group(['middleware' => ['auth:sanctum']], function () {
Route::get('/me', function() {
echo "Hello World";
})->name('me');
Route::post('/auth/logout', [AuthController::class, 'logout']);
});
Я не могу проверить это в это время, но я не уверен, что хорошо понимаю. Я должен создать экземпляр axios в отдельном файле и использовать этот экземпляр во всех запросах? Проблема 2: Токен должен быть изменен, потому что Laravel возвращает что-то вроде этого
79|CX1202zNQCpUc2rqp88Bwa48aNQ1F6G5psfk1lLn
, но я должен использовать что-то вроде этогоBearer CX1202zNQCpUc2rqp88Bwa48aNQ1F6G5psfk1lLn
1) Да, вы должны вернуть этот экземпляр, созданный Axios (извините, что не ясно). 2) Не должно быть необходимости, должно работать из коробки. Может быть, я путаюсь с файлами cookie, извините в таком случае.
Это не работает. Я обновил свой пост, чтобы вы могли проверить мой код.