【发布时间】：2019-05-29 05:46:33
【问题描述】：
我有一个完全完成的项目，使用 Laravel 后端和 React 前端。 react 应用程序包含在 Laravel 代码中，只有在登录和一些选择后才能使用，这些都是在 laravel 中通过其视图完成的。我想将 react 应用程序作为一个独立的应用程序，并将 laravel 代码变成一个 api，通过服务器提供。一个 url，这样 react 应用程序将通过向 laravel api 发出请求来工作。
所以我的第一个问题是：有没有一种方法可以在我的 laravel 代码中实现 API 来模仿我已经存在的登录实现？
由于我的问题非常广泛，因此我不确定要为这个问题提供什么代码。代码遵循 MVC 设计模式，请随意索取部分代码。
作为一个稍微偏离主题的问题（如果您只是想帮助 laravel 的东西，请不要阅读此内容）：我想将 laravel 后端和 react 前端应用程序解耦的原因是包装 react使用 laravel 后端的电子应用程序使其成为离线应用程序。这是一个合理的方法吗？
编辑：我发现问题的症结在于如何执行登录“API 样式”与 laravel 提供的登录表单。所以我认为我需要使用 laravel Passport 实现登录，检索具有与通过 laravel 登录表单登录的用户匹配的凭据的用户。但是我很难看清 laravel 登录表单中的逻辑，所以我可以帮忙看看如何做到这一点。
下面是我的登录控制器的代码，以及相关的中间件。同样，告诉您是否需要更多代码。
登录控制器（来自 App/http/controllers/auth）：
<?php
namespace App\Http\Controllers\Auth;
use App\Http\Controllers\Controller;
use Illuminate\Foundation\Auth\AuthenticatesUsers;
class LoginController extends Controller
{
/*
|---------------------------------------------------------------------
| Login Controller
|------------------------------------------------------------------------
|
| This controller handles authenticating users for the application and
| redirecting them to your home screen. The controller uses a trait
| to conveniently provide its functionality to your applications.
|
*/
use AuthenticatesUsers;
/**
* Where to redirect users after login.
*
* @var string
*/
protected $redirectTo = '/';
/**
* Create a new controller instance.
*
* @return void
*/
public function __construct()
{
$this->middleware('guest')->except('logout');
}
}
中间件（来自 App/http/Kernel.php）：
protected $routeMiddleware = [
'auth' => \Illuminate\Auth\Middleware\Authenticate::class,
'auth.basic' => \Illuminate\Auth\Middleware \AuthenticateWithBasicAuth::class,
'bindings' => \Illuminate\Routing\Middleware\SubstituteBindings::class,
'cache.headers' => \Illuminate\Http\Middleware\SetCacheHeaders::class,
'can' => \Illuminate\Auth\Middleware\Authorize::class,
'guest' => \App\Http\Middleware\RedirectIfAuthenticated::class,
'throttle' => \Illuminate\Routing\Middleware\ThrottleRequests::class,
];
Edit-2：
这是我的 web.php 路由的代码：
<?php
/*
|---------------------------------------------------------------
| Web Routes
|----------------------------------------------------------------------
|
| Here is where you can register web routes for your application. These
| routes are loaded by the RouteServiceProvider within a group which
| contains the "web" middleware group. Now create something great!
|
*/
Auth::routes();
Route::get('/', 'HomeController@index')->name('home');
Route::get('/home', 'HomeController@index')->name('home');
Route::get('/setlocale/{locale}', function (Request $request, $locale) {
if (in_array($locale, \Config::get('app.locales'))) {
session()->put('locale', $locale);
}
return redirect()->back();
});
Route::get('/profile', 'UserController@show')->name('profile');
Route::patch('/profile', 'UserController@update')->name('users.update');
Route::get('/scan', 'HomeController@index')->name('scan.index');
Route::get('/scan/new', 'ScanController@new')->name('scan.new');
Route::get('/scan/{id}', 'ScanController@show')->name('scan.show');
Route::post('/scan', 'ScanController@create')->name('scan.create');
Route::patch('/scan/{id}', 'ScanController@update')->name('scan.update');
Route::delete('/scan/{id}', 'ScanController@destroy')->name('scan.destroy');
// save SCAN JSON
Route::post('/scan/{id}/save', 'ScanController@save')->name('scan.save');
编辑 3：
首先，当我创建访问令牌时，/oauth/personal-access-tokens 中存储的内容如下所示：
0:
client:
created_at: "2019-01-04 13:00:48"
id: 3
name: "SCAN Personal Access Client"
password_client: false
personal_access_client: true
redirect: "http://localhost"
revoked: false
updated_at: "2019-01-04 13:00:48"
user_id: null
__proto__: Object
client_id: 3
created_at: "2019-01-15 13:52:22"
expires_at: "2020-01-15 13:52:22"
id: "0321b2d622bd7267273225a64cf6f1723cc74b86076831432fb5af4885051c6776bb8ea77c0d7407"
name: "MyApp"
revoked: false
scopes: []
updated_at: "2019-01-15 13:52:22"
user_id: 1
__proto__: Object
见第一个客户端，在 13:00:48 制作，uder_id 为空。有问题吗？
其次，这是我尝试使用 axios 发出请求的方法，使用函数 login 获取访问令牌（我确实获得了访问令牌），并且我的 API 在 localhost:4321 上运行
login = async () => {
return axios.post('http://localhost:4321/api/login', {
grant_type: 'password',
client_id: 5,
client_secret: 'd3zuZL6KbBI4DOq4Z7NQkP1ezrAj5GMjgo39',
email: 'my mail, used to login',
password: 'my password',
scope: '',
})
}
async componentDidMount() {
const accessTokenData = await this.login();
var config = {
headers: {
Authorization: "bearer " + accessToken
},
grant_type: 'password',
client_id: 'PassGrantClient',
client_secret: 'd3zuZL6KbBI4zsDOq4Z7NQkP1ezrAj5GMjgo39',
scope: '',
};
axios.post(
'http://localhost:4321/api/getInterview',
{},
config
).then((response) => {
console.log(response)
})
}
getInterview 路由指向函数的地方
public function getInterview()
{
$user = Auth::user();
return response()->json($user);
}
返回 401。如您所见，我不知道在哪里放什么 :)。如果您需要更多代码，请随时询问:)。
【问题讨论】：