Laravel Auth 与 React 前端的集成
声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow
原文地址: http://stackoverflow.com/questions/49079900/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Laravel Auth Integration with React Frontend
提问by Zach Handley
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
无法在 Google 上找到确切答案,我正在尝试将 Laravel 的身份验证系统与 React 集成,以便我的开发人员可以在前端使用用户数据
In Laravel you can do things such as
在 Laravel 中你可以做一些事情,比如
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?
当用户登录 React 应用程序时,它会将数据发送到后端,我是否需要他向后端发送请求以检查登录等?如果我们不使用 Laravel 前端,Auth::check() 是否会返回 true 如果他们通过前端登录?
I'm a bit new to using Laravel as a backend only so I apologize if this question has an obvious answer
我对仅使用 Laravel 作为后端有点陌生,所以如果这个问题有明显的答案,我深表歉意
Thanks
谢谢
- Zach
- 扎克
回答by Devin Price
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.
如果您正在使用 React 和 Laravel 构建单页应用程序,最常见的方法是使用 Javascript Web Tokens (JWT) 进行 API 身份验证。
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.
Laravel 没有自带 API 身份验证方法。但是,Laravel Passport ( https://laravel.com/docs/master/passport) 或其他流行的库,如 JWT Auth ( https://github.com/tymondesigns/jwt-auth) 提供了这一层。
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).
使用 API 身份验证时,客户端(在本例中为 React 前端)会在用户提交用户凭据时将其发送到登录 API 端点。然后 Laravel 对用户进行身份验证,如果用户身份验证成功,则在 JSON 响应中返回一个 JWT(基本上是一个长字符串)(以及您可能想要返回的任何其他信息,例如用户名)。
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 (e.g. Passport) has methods that verify if the user is authenticated and provide the user object based on the JWT token that was provided.
然后可以将该 JWT 令牌保存到 cookie 或本地存储中,并用于对 API 的后续请求(通常在标头中发送)。您使用的 API 身份验证库(例如 Passport)具有验证用户是否通过身份验证并根据提供的 JWT 令牌提供用户对象的方法。
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.
当我第一次学习这个时,有一个工作示例真的很有帮助。我使用了https://github.com/lijujohn13/react-laravel-auth,这是 Ali M 在评论中提到的(谢谢!)。我还发布了我自己的示例 todo 应用程序 ( https://github.com/devinsays/laravel-react-bootstrap),它使用 jwt-auth 库并且还对所有端点进行了测试。