Use laravel as proxy of frontend-CodePudding

I have a laraval project with react application in the same project, before running the react app I have many middleware that check some authorization like if a country is authorized to access or not:

 Route::middleware(['firewall.country', 'firewall.ip'])->group(function () {
     Route::get('/{any}', function () {
           return view('app');
      })->where('any', '^(?!api).*$');
});

Now I need to deploy the react front separately from laravel project. My question is how to keep this middleware running before react application.

CodePudding user response：

You can add a middleware in Laravel that checks the authorization and redirects to the react app. You can then add a new route in Laravel that serves the react app. If the authorization fails, Laravel can return a response with an error message. Here's an example:

Create a new middleware in Laravel:

php artisan make:middleware CheckAuthorization

Add the code for checking authorization in the middleware's handle method:

namespace App\Http\Middleware;

use Closure;

class CheckAuthorization
{
    public function handle($request, Closure $next)
    {
        // Code for checking authorization

        // If authorization fails
        if (!$authorized) {
            return response()->json(['error' => 'Not authorized'], 403);
        }

        // If authorization succeeds
        return $next($request);
    }
}

Add the middleware to the list of global middlewares in app/Http/Kernel.php:

protected $middleware = [
    ...
    \App\Http\Middleware\CheckAuthorization::class,
];

Add a new route in Laravel that serves the react app:

Route::get('/{any}', function () {
    return view('react');
})->where('any', '.*');

Create a new view for serving the react app, for example react.blade.php, and include the react app in the view:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>React App</title>
    </head>
    <body>
        <div id="root"></div>
        <script src="/js/app.js"></script>
    </body>
</html>

Now, when the react app is accessed, the CheckAuthorization middleware will run first and check if the user is authorized. If the user is not authorized, Laravel will return an error message. If the user is authorized, the react app will be served.

CodePudding user response：

To use laravel as proxy you can do like this:

Route::get('/check', function ($endpoint) {
  $client = new GuzzleHttp\Client();
  $response = $client->get("https://external-front.com/");
  return response($response->getBody(), $response->getStatusCode())
    ->header('Content-Type', $response->getHeader('Content-Type'));
});

But this is a bad idea. The better way is to change your laravel endpoint like this:

 Route::get('/check', function () {
       return 'check';
  })->middleware(['firewall.country', 'firewall.ip']);// here all your middleware before react loaded

Then in your react app:

 const App = () => {
      useLayoutEffect(() => {
           axios.get('/check')
                .catch(function (error) {
                     if (error.response.status == 403) {
                          //redirect to your access denied page 
                      } 
           });
      }, []);
 }