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?
Related
I want to use Nuxt.js for my frontend and laravel sanctum as my backend authentication provider. How should I set the SESSION_DOMAIN key in the .env file in my laravel project.
Also should I edit anything in the server object part in the nuxt.config.js file to make this work?
When you use Sanctum with SPA, such as Nuxt, you've the option to use either API or cookies/sessions. If your application is a first-party application on same top level domain, Laravel recommends to use cookie based approach so you can take advantage of CSRF protection. Axios and Angular Http libraries handles CSRF out of the box, so you don't have to worry too much about handling the requests headers [1].
In your case, I assume your application is first party and is on same top level domain. So your SESSION_DOMAIN value would be for example .domain.com. Also you'll need to set SANCTUM_STATEFUL_DOMAINS=domain.com as well. Usually your SESSION_DOMAIN will have just the main domain your application uses on, while SANCTUM_STATEFUL_DOMAINS will have all the subdomains (if any), that your frontend uses.
To work with Sanctum, we should be familiar with a few things first. We must use our SPA and API backend on the same domain, like frontend on domain.com and API on api.domain.com. We can not set frontend on domain.com and backend (API) on another-domain.com. The client must be able to include cookies with each request being sent to the backend.
session domain is the front-end domain name without protocol and port.
When you are working on local you must set it to localhost and when you are working on server you must set the domain name.
please follow this example of nuxt-laravel-sanctum-auth
I have separate backend and frontend. However, they run on the same server (this may change in the future). The backend serves as an api and is powered by Laravel. Frontend by Nuxt (Vue).
I wish only my Nuxt application could access the api. How can I configure Laravel to only return data if the request comes from a Nuxt application?
I thought about adding a special token to requests, but the user will be able to check what request is coming out and capture the token. Can anyone give me ideas how this can be solved?
You must be knowing about CORS. So in your Laravel Server, allow requests from only the frontend server's domain like this:
Access-Control-Allow-Origin: https://www.example.com
Simplest solution would be to add serverMiddleware in the nuxt project and route all the requests to the "real" api through it. Clients will hit the internal nuxt api and they will not be able to see the actual request made to the real api. There you can also add the token you are talking about for extra layer of security.
How to connect frontend to backend?
The site was Laravel 5.7 + VUE. Now was completely written from scratch in JS frontend (self-written).
I. e. it is necessary to leave the old backend (Laravel 5.7) + API and connect the new frontend to it.
As I understand it, you need to rewrite the old backend for a new frontend or not?
New frontend only. The task is to connect the old backend and API to the new frontend.
It's not necessary to rewrite your backend, in fact a would try to leave it as it is, and just try to connect new frontend with existing backend API (endpoints). Or is there any specific reason for changing the backenend codebase?
VUE is a Javascript frontend framework and Laravel is a framework for PHP so you do not need to rewrite the backend. What you need to do is configure your frontend to match the
Laravel codebase in the backend.
I have an Ionic 3 web app where I'm using Laravel for both the API and the back-end manager with Nova. Ideally, I'd like my setup to be:
Server 1: example.com serving only my static Ionic App
Server 2: api.example.com serving my Laravel API
Server 2: example.com/admin serving my Laravel backend with Nova
This is easy with Laravel forge, except that I want api.example.com and example.com/admin to be powered by the same application. Right now it looks like I would need my code to live as two separate applications, one for api. and one for /admin.
It makes sense that there would be a way to configure Nginx to point both to the same place, but how, and which one, and where?
I solved this with a redirect from /admin to the appropriate destination. You can either do this in nginx or in Ionic.
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.