Laravel Auth 与 React 前端的集成

Question

Unable to find an exact answer to this on Google, I'm trying to integrate Laravel's authentication system with React so the user data is available on the frontend to my developer

In Laravel you can do things such as

Auth::user()->id

and I'd like that data to be available in the frontend (as well as code like the following)

Auth::check()

When a user logs in to the React App it sends the data to the backend, do I need him to send a request to the backend to check for logins and such? Will Auth::check() return true if they're logged in VIA the front end if we don't use the Laravel front end?

I'm a bit new to using Laravel as a backend only so I apologize if this question has an obvious answer

Thanks

• Zach

Answer 1

If you're building a single page application with React and Laravel, the most common approach is to use Javascript Web Tokens (JWT) for API authentication.

Laravel doesn't come with API authentication methods our of the box. However, Laravel Passport ( https://laravel.com/docs/master/passport ) or other popular libraries like JWT Auth ( https://github.com/tymondesigns/jwt-auth ) provide this layer.

When using API authentication, the client (in this case a React frontend) sends the user's credentials to a login API endpoint when the user submits them. Laravel then authenticates the user, and returns a JWT (basically a long string) in the JSON response if the user authenticated successfully (along with any other information you might want to return, like the User Name for example).

That JWT token can then be saved into a cookie or local storage, and used for subsequent requests to the API (usually sent in the header). The API Auth library you've used (eg Passport) has methods that verify if the user is authenticated and provide the user object based on the JWT token that was provided.

When I was first learning this, it was really helpful to have a working example. I used https://github.com/lijujohn13/react-laravel-auth , which was mentioned by Ali M in the comments (thanks!). I also released my own example todo app ( https://github.com/devinsays/laravel-react-bootstrap ) that uses the jwt-auth library and also has tests for all the endpoints.