We're currently developing a multipage app using VueJS as frontend javascript framework, Element.io as CSS framework.
We're not exposing any web services or some kind.
Our application is responsive - users can create records using desktop and mobile.
Do I need to create API routes or WEB routes is sufficient enough?
Are there any scenario you can think of that I need an API route?
Web routes are for frontend views where API routes would be for API calls, you would definitely need to separate them as your VueJS will make calls to your API with JSON and get a JSON response in return with error codes to handle your errors efficiently.
Web Controller:
return view('blade_file')->with(compact('var1', 'var2'));
If you set the error codes here, it will show you the blade file for that error code, eg. 404 will show you the blade view file at ./resources/views/errors/404.blade.php but your application will expect JSON response instead of HTML response.
API Controller:
return response()->json(compact('var1', 'var2'), 200); // success
return response()->json(['error' => 'bad request'], 400); // bad request
If you set error codes here, you will still get a JSON response, just with the error code specified.
Conclusion:
Separate your frontend and backend with API and Web routes as requests/responses are handled differently.
Notes:
Remember to add your CSRF token in your header when making ajax/axios requests to this API.
Make sure your middleware is api. If the API only allow authenticated users, you would need the middleware to be auth:api and you would need to use Laravel Passport.
Remember to add the namespace of Api to your API routes, either in routes/api.php file or app/Providers/RouteServiceProvider.php.
Related
I have a project, using Nuxt 2 as frontend and Php-Laravel as backend app. The app have multiple language on each side also using localized routes in Nuxt + i18n.
We're sending some notification emails on backend managed by cron jobs, some emails contains a links to directed to front end.
But there is too many options due to localized routes and it is hard to manage.
For example, there is a page on frontend
en/account/payments/12345/invoice
tr/hesap/ödemeler/12345/fatura
es/cuenta/pagos/12345/factura
fr/compte/paiements/12345/facture
it/account/pagamenti/12345/fattura
How can i manage that?
I've tried a create server middleware on Nuxt to create these routes and to work act rest api server only return paths as json, but i can't access vue-router on server middleware.
Could you suggest me a solution?
I'm building the backend with laravel and then using Vue as front-end. Data is accessed over api calls using axios. Now I have this relatively simple task but I can't seem to find the proper solution. I want one of the routes to be easily consumable by Vue compoenents without the need to log in, however I don't want that route to be publicly available for anyone to use. I'm talking about the GET request and not the POST request with a CSRF token.
Let me add an example, here it is my route:
Route::get('MyFAQS',[\App\Http\Controllers\FaqController::class,'getQuestions']);
And the vue js:
axios.get('api/MyFAQS').
then(response => {
this.FAQ = response.data;
console.log(this.FAQ);
})
.catch(error=>{
console.log("can not get FAQ: " + error)
})
In this situation anyone can do also a GET request to https://mywebsite.com/api/MyFAQS and use my data on his website, how can I protect it?
API token are one of the ways to go.
try https://laravel.com/docs/8.x/sanctum
or
https://laravel.com/docs/8.x/passport
I'd like to do the following:
My website is designed as Vue SPA, which performs requests to an Laravel-powered API. This API includes a POST-Route that allows to submit the content of a contact formular.
/*Contact Routes*/
Route::group(['prefix' => 'contact'], function ($router) {
/*Send*/
Route::post('/send', 'ContactApiController#send')
->name('api.contact.send');
});
Now I'd like to protect this route, so only requests that are submitted from the SPA are allowed, otherwise I guess I'd need to handle a lot of spam once somebody figures out that it's enough to create simple post requests to the API endpoint.
There's no user auth planned on that site at the moment, so I think that Laravel airlock does not work in this scenario.
My question: How can I protect my routes from being accessed externally?
How to make API routes only accessible inside the app?
For example http://host.com/api/products returns the data as intended but it's really insecure since anyone could access it through postman or the browser.
Using Laravel 5.3 I've set up a web app that consumes its own API. Authentication successfully handled by Passport. Web app uses auth middleware in routes and Model Policies for authorization. API routing uses default 'auth:api' token guard to control access.
I would like to use the same Policies in app/Policies for API authorization as well as the web auth, but I don't understand how. Calls such as $this->authorize('view', $model) do not work. I guess I need to pass the user from Auth::guard('api')->user() to the Policies somehow?
Any help would be appreciated!
Update: Got it working.
Seems that even for the API calls Laravel was still using the user from the web guard to check against policies. This user is undefined for API calls. So I needed to tell Laravel that all API calls should use the api guard.
Create a new middleware with Auth::shouldUse('api'); in the handle function.
Assign the middleware to the api section in the kernel.
Laravel will now use the api guard for all API requests. Calls like $this->authorize('view', $model) will work in both web and api.
Update: Got it working.
Seems that even for the API calls Laravel was still using the user from the web guard to check against policies. This user is undefined for API calls. So I needed to tell Laravel that all API calls should use the api guard.
Create a new middleware with Auth::shouldUse('api'); in the handle function.
Assign the middleware to the api section in the kernel.
Laravel will now use the api guard for all API requests. Calls like $this->authorize('view', $model) will work in both web and api.
Just use auth:api middleware for routes with Policies