axios get passing parameter to laravel route - laravel

I am trying to pass an id through axios.get in vue.js to laravel route.
my axios code plus parameter are as following,
axios.get('http://localhost/laravel_back/public/api/bpaper',{
params: {
id:12
}
and my laravel route is as follows,
Route::get('bpaper/{id}', function($id)
{
return 'Paper '.$id;
});
when executing this code i get a 404 error on my browser console. and the request url is,
Request URL:http://localhost/laravel_back/public/api/bpaper?id=12
I have already given the access-control allow methods to allow communication through axios. And the code runs when not providing a parameter. any one know a fix.

Considerind server-side is Route::get('bpaper/{id}', function($id) { ..., the id is part of the path, not a parameter. Add it to the URL. Do:
var myId = 12;
axios.get('http://localhost/laravel_back/public/api/bpaper/' + myId)
Added it to a myId variable for clarity, you don't have to do it. Using:
axios.get('http://localhost/laravel_back/public/api/bpaper/12')
would work just as well.
Also, if you have access to newer versions of JavaScript, you can profit from template strings:
var myId = 12;
axios.get(`http://localhost/laravel_back/public/api/bpaper/${myId}`)

Related

Making a HTTP Request with id parameter

I have 2 projects running in two diffrent ports
In another project I have written this route
Project A
Route::get("/getBook/{id}", function ($id) {
return response()->json(BlogArticle::find($id));
});
This route will be used as an api for other projects to get the needded books.
In the other project i want to retrive the book by sending a id as a parameter {id} in the url
My approach
Route::get("/api/testing", function () {
$response = Http::get('http://127.0.0.1:900/api/getBook', [
'id' => 1
]);
return $response;
});
But nothing is being returned I am getting 404 not found error?
What am I missing?
Since the route definition is Route::get('/getBook/{id}') it means any GET request to that URL will be handled. The {id} part is a placeholder in the URL, it does not denote a query string part. Therefore you’ll have to include the ID in the URL itself:
$response = Http::get('http://127.0.0.1:900/api/getBook/1')

Retrieve url param value from strapi

How do I get the parameters value passed in the url? For example, my url is /forgot-password?email=testing#example.com&token=fb49d692186dd4744af50446fad2f031
I want to get the value of email and token. All I found from the doc is only about the segment as parameters value which set from route as /user/:id which is different usage for my case.
Strapi uses koa.
Therefor you can just use ctx.request.query.
Inside your handler:
async test(ctx) {
let queryObj = ctx.request.query
//use them...
}
For your stated request the object will contain:
{
email: 'testing#example.com',
token: 'fb49d692186dd4744af50446fad2f031'
}

How to construct a route model binding url with axios?

I want to write a vue Axios URL with slug and id, but I can't.
Please help me.
axios.get('http://localhost/BUproject/postsByUser/' + slug / +id)
.then(response => {
this.postsByUser = response.data;
Vue.filter('myOwnTime', function (value) {
return moment(value).fromNow();
});
});
It looks like from your code the placement of the quotes and + is not quite adding up properly.
You can do good old fashioned string concatenation:
'http://localhost/BUproject/postsByUser/' + slug + '/' +id'
Or if using ES6, you can do
`http://localhost/BUproject/postsByUser/${slug}/${id}`
Also if the call will always be to the same server as you are working in, you can ditch the http://localhost part to make it relative to the root.
`/BUproject/postsByUser/${slug}/${id}`
All you ever wanted to know about String in javascript

Laravel Signed URL Middlware

So I'm working with URL generation with laravel and I was wondering if you can use multiple routes with the same URL Signature. I have my routes grouped into the signed middlware group as below:
Route::middleware('signed')->group(function () {
Route::get('load/client/{client}/quote/{quote}', 'QuoteController#getClientQuote')->name('clientquote');
Route::post('submit/client/{client}/quote/{quote}', 'QuoteController#submitClientQuote')->name('clientquote');
Route::post('save/client/{client}/quote/{quote}', 'QuoteController#saveClientQuote')->name('clientquote');
Route::get('/client/{client}/quote/{quote}', 'QuoteController#getClientQuoteBlade')->name('clientquote');
});
I also have the URL generated in an email here:
'url' => URL::signedRoute('clientquote', ['client' => $event->client, 'quote' => $event->quote]),
The email is sent through mailgun and when I click on the link in the email it takes me to the last get route in my middlware. Once that route's component is mounted i make a secondary axios call to get the load route:
axios
.get(
"/load/client/" + clientNumber + "/quote/" + quoteNumber + window.location.search
)
leaving off the other code but I get a 403 error and just to verify in the console here is the route:
/load/client/2/quote/1?signature=5d2e3273e51429ba688f85969911bd3a279d36348f2e74bd10f871a56218e722
is what I'm asking for even possible or do I need to generate a new Signed URL for each subsequent route?
If you have a route under signed middleware, it means that all those routes should have valid signature. Otherwise it will give you 403 error.
When you call URL::signedRoute(..), that signature particularly represent that specific route url. So if you try to attach the same signature to a different route altogether, it will not work.
What you can do is, when you are sending the data to blade view in clientquote route, send the signed url generated as well for /load/client/ route and then use that in axois.

Vue API Calls and Laravel Middleware

Is it possible to globally set a listener on API calls made with Axios in Vue? The Laravel back-end has middleware set up on each endpoint that will either give the requested data or return a message saying that they need to check their messages. My goal is to capture that message and redirect the user to the page to view their message. I can't think of a way to do this other than setting something on each function that checks for the message and responds accordingly. There are hundreds of functions and that it wouldn't be a clean solution.
Any and all recommendations are welcome!
Using Axios Interceptors you can do something along these lines:
this.$http.interceptors.response.use(response => () {
// Redirect to a new page when you send
// custom header from the server
if (response.headers.hasOwnProperty('my-custom-header')) {
window.location.href = '/another-page';
}
// Or when you get a specific response status code
if (response.status === 402) {
window.location.href = '/another-page';
}
// Or when the response contains some specific data
if (response.data.someKey === 'redirect') {
window.location.href = '/another-page';
}
// ...or whatever you want
});

Resources