make post protected routes by laravel sanctum api + vuejs
api.php file
Route::middleware('auth:sanctum')->post('/blogpost', [apiController::class, 'blogPost']);
----------------------------------------------------------------------------------------------------------------
apiController.php
function blogPost(Request $request){
try {
$blog = new Blogsposts;
$blog->blog_name = $request->name;
$blog->blog_description = $request->description;
$blog->save();
return response()->json([
'status'=>'true',
'message'=>'BLOG PUBLISHED!'
]);
} catch (Throwable $th) {
return response()->json([
'status'=>'false',
'message'=>'BLOG NOT PUBLISHED!',
'data'=>$th
]);
}
}
------------------------------------------------------------------------------------------------------------------
MyPagesView.vue
<script>
export default {
name: 'MyPagesView',
data() {
return {
name: '',
description: ''
}
},
methods: {
saveBlog() {
console.warn(this.name + ' ' + this.description);
let token = localStorage.getItem("bearer_token");
var name = this.name;
var description = this.description;
let items = {name,description}
fetch("http://localhost:8000/api/blogpost", {
method: "POST",
headers: {
"Authorization": "Bearer " + token,
"Content-Type": "application/json",
"Accept": "application/json"
},
body: JSON.stringify(items)
})
.then(response => response.json())
.then(data => {
console.warn(data);
if(data.status){
this.name = '';
this.description = '';
alert(data.message);
this.$router.push('/posts');
}else{
alert(data.message);
}
})
}
}
}
</script>
<template>
<br>
<h2 class="text-center" style="color: blue;">Blog Post</h2>
<br>
<div class="row">
<div class="col-2"></div>
<div class="col-8">
<form @submit.prevent="saveBlog">
<div class="mb-3">
<label for="blog_name" class="form-label">Blog Name</label>
<input type="text" class="form-control" name="blog_name" id="blog_name"
aria-describedby="Enter blog's name" v-model="name">
</div>
<div class="mb-3">
<label for="details">Blog Detail's</label>
<textarea class="form-control" name="details" id="details" rows="4" v-model="description"></textarea>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
</div>
<div class="col-2"></div>
</div>
</template>
