簡単な、カスタマイズ、マルチ認証システムを React Redux ←→ Laravel間で統合実装する方法を教えていただきたいです。

###前提・実現したいこと
React Redux axios Laravel の構成で、React Redux で作ったフロントエンドの認証(ログイン画面)をLaravelでPassportを使用・不使用問わずどうにかして、データベースのテーブル構造をうまく渡してLaravelと合体させたい。最終的には、React Reduxで作るSPAのアプリ制作なのでReact ReduxのログインページをLaravelでアクセストークンを持たせて管理者ユーザと一般ユーザーからのマルチ認証システムが作りたい。Laravelは、APIサーバーとして、サイボウズLiveのAPIからスケジュールデータを抜き取る為に使用します。

###疑問点・分からない事
Passportは使った方が、アクセストークンや、認証・認可のシステムは作りやすいのは、チュートリアルを使用して分かりました。しかし、カスタマイズする時に、Vue.jsでなく、Reactを使いたいので、php artisan preset reactを使用したら、Vue.jsのスキャフォールディングページが一括削除されたため、チュートリアルで用意されているページが表示できなくなった。

Passportを使用したいのであれば、Vue.jsとReactの両方の導入をしないといけないのか？
Passportを使わずに、Vue.js抜きで、Reactで作ったアプリのページを表示させることに集中した方がいいのか？が分かりません。

###解決したい事
簡単な、カスタマイズ、マルチ認証システムを React Redux ←→ Laravel間で統合実装する方法を教えていただきたいです。

###発生している問題・エラーメッセージ
axios.jsでbaseURLに任意のURLを指定していて、React Routerでルーティング、Laravelのweb.phpでもルーティングしています。そこの画面表示だけでなくデータの結合方法が分からないです。

###該当のソースコード

//axios.js

import axiosBase from 'axios'

const baseUrl = NODE_ENV === 'dev' ? 'http://cra-trip.dev' : ''

const axios = axiosBase.create({
  baseURL: baseUrl,
  headers: {
    'ContentType': 'application/json',
    'X-Requested-With': 'XMLHttpRequest'
  },
  responseType: 'json'
})

export default axios

//web.php(Laravel5.5)

<?php
use Illuminate\Http\Request;
/*
|--------------------------------------------------------------------------
| 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!
|
*/

Route::get('/welcome', function () {
    return view('welcome');
});

Auth::routes();

Route::get('/home', 'HomeController@index')->name('home');

Route::get('/', function () {
    $query = http_build_query([
        'client_id' => '1',
        'redirect_uri' => 'http://cra-trip.dev/callback',
        'response_type' => 'code',
        'scope' => '*',
    ]);

    return redirect('http://cra-trip.dev/oauth/authorize?'.$query);
});

Route::get('/callback', function (Request $request) {
    $http = new GuzzleHttp\Client;

    $response = $http->post('http://cra-trip.dev/oauth/token', [
        'form_params' => [
            'grant_type' => 'authorization_code',
            'client_id' => '1',
            'client_secret' => 'DIEObJnz84zOkYsyLz1fDBmNPiywYLFNtQOlMeeN',
            'redirect_uri' => 'http://cra-trip.dev/callback',
            'code' => $request->code,
        ],
    ]);

    return json_decode((string) $response->getBody(), true);
});

Route::get('/api_test', function (Request $request) {
    $client = new GuzzleHttp\Client;
    $accessToken = "eyJ0eXAiOiJKV1QiLCJhbGciOiJSUzI1NiIsImp0aSI6IjhkZjc5NjQ4MTFiNWE5NjA4ODNhMGVmYTViNTg5YWNjMzEwNTM0ZGJmMGRmYjI4NDI2NWE0NTY1YjY4MjNkYjBlZDRkOTlkODg3YzJkMGE2In0.eyJhdWQiOiIxIiwianRpIjoiOGRmNzk2NDgxMWI1YTk2MDg4M2EwZWZhNWI1ODlhY2MzMTA1MzRkYmYwZGZiMjg0MjY1YTQ1NjViNjgyM2RiMGVkNGQ5OWQ4ODdjMmQwYTYiLCJpYXQiOjE1MTI5NTkwMDMsIm5iZiI6MTUxMjk1OTAwMywiZXhwIjoxNTQ0NDk1MDAzLCJzdWIiOiIxIiwic2NvcGVzIjpbXX0.6Ojx3cdSwAoinfj1ADo6iVoihB5dp6Mbm8--mq5zHdmyb5iY6RWWjofs4bmedxMuRj1r42YQ5PrrX9qmFfPh-xXiJyaHeBlPeeY8-f471DW02kjRc_lTjgd-_e443c2K1ou2G-brLUOG283oiBGS7EHBVT8_BLeIAxdb0_1xAr4BfihMRg51oD1GzOo4is3wuKhB_ozmOCtftg1cLA9i8fe-frDesVvaGNPdpDrimQ3GnB0Tnpe4r_1bGdKCpiRSIp25gAriAFnAaWYnLUleFG8TtSV-LPQoUIFzt3A4AOlU_myojMrezEuJ9Hr8GKSGT0sN2yvqGeL4XZExs0wWs7w-UaV56bALnNLkAzEzXl1Ue3o58UrqeheCxCGnoVRIxsxu3ls8iFKjCtwMn-uUCXVi1wNvE1qd24E6Cq4T8neUAjDeWREjph7seKxKTqUs4vgDDGzKYOc5nUfubm8Ec4lo07MgmDk67o-QkcabTjZyMD9mXA4_oe82C29qYpGFrGCHIbp3QBuZNzRZ-L0K0YEPDk8B8WEvCGeaRJ4FOlAUK-029RD6aXjIgHkS9y6y4MRhIrwPV2UpqlR_8JafXLZXU6Air-iaBBHFeDAqmgZwcIxiP_qS58Cnqr8ZK32GgY1d7jHaKGyPUKeJyBANNKQZZHhpbFVXplJSAfpLUgI";

    $response = $client->request('GET', 'http://cra-trip.dev/api/user', [
        'headers' => [
            'Accept' => 'application/json',
            'Authorization' => 'Bearer ' . $accessToken,
        ],
    ]);

    return json_decode((string)$response->getBody(), true);
});

//api.php(Laravel5.5)

<?php

use Illuminate\Http\Request;

/*
|--------------------------------------------------------------------------
| API Routes
|--------------------------------------------------------------------------
|
| Here is where you can register API routes for your application. These
| routes are loaded by the RouteServiceProvider within a group which
| is assigned the "api" middleware group. Enjoy building your API!
|
*/

Route::middleware('auth:api')->get('/user', function (Request $request) {
    return $request->user();
});

//login.js(React)

import { connect } from 'react-redux'
import { Redirect } from 'react-router-dom'
import UserAction from 'actions/UserAction'

const Login = ({ user, doLogin }) => {
   const submitting = (e) => {
    e.preventDefault()
    let name = e.currentTarget.inputName.value
    let password = e.currentTarget.inputPassword.value
    doLogin(name, password)
  }

  return user ?
    <Redirect to="/" />
    : (
      <div className="Login container">
        <form className="form-signin" onSubmit={ e => submitting(e) }>
          <h2 className="form-signin-heading">Please sign in</h2>
          <label htmlFor="inputEmail" className="sr-only">Email address</label>
          <input type="text" id="inputName" name="inputName" className="form-control" placeholder="Your name" required="" autoFocus="" />
          <label htmlFor="inputPassword" className="sr-only">Password</label>
          <input type="password" id="inputPassword" name="inputPassword" className="form-control" placeholder="Password" required="" />
          <div className="checkbox">
            <label>
              <input type="checkbox" value="remember-me" /> Remember me
            </label>
          </div>
          <button className="btn btn-lg btn-primary btn-block" type="submit">Sign in</button>
        </form>
      </div>
    )
}

Login.propTypes = {
  user: PropTypes.object,
  doLogin: PropTypes.func.isRequired
}

function stateToProps(state) {
  return {
    user: state.user
  }
}

function dispatchToProps(dispatch) {
  return {
    doLogin: (name, password) => dispatch(UserAction.login(name, password))
  }
}

export default connect(stateToProps, dispatchToProps)(Login)

//フロントエンドのpackage.json一部抜粋
  "dependencies": {
    "axios": "^0.17.0",
    "bootstrap": "^3.3.7",
    "immutable": "^3.8.2",
    "jquery": "^3.2.1",
    "moment": "^2.19.1",
    "react": "^16.0.0",
    "react-dom": "^16.0.0",
    "react-redux": "^5.0.6",
    "react-router": "^4.2.0",
    "react-router-dom": "^4.2.2",
    "redux": "^3.7.2",
    "redux-thunk": "^2.2.0"
  },

###試したこと
index.htmlとbundle.jsをバックエンドのweb.phpのルーティングで、/loginに持ってきたらReactのログインページは表示されたものの、ログインが出来ない状態だったので、一旦、Reactのページは表示されないように設定し、Laravel5.5のPassportの/register 、/login、/welcomeからログイン、アクセストークン発行などをしている状態。Laravelのstorage/framework/views以下に、ページのキャッシュがたまるので、それを削除しないと、たとえ、web.phpでルーティングから、Reactのページを外しても、延々とReactで作成したログインページが表示され続けるエラーが出ました。

###補足情報(言語/FW/ツール等のバージョンなど)
Mac OS Sierra
vagrant
virtualbox
Laravel5.5
react 16.0.0
redux 3.7.2
axios 0.17.0

行動規範の内容に同意します

回答1件

ベストアンサー

SPA型のWebアプリ+LaravelのAPI型認証で構築する場合は、以下の記事がVue.jsとPassportでなくjwt-authですがわかりやすいので一度こなした後にReact.js等に挑むと把握がしやすいかもしれません。
Laravel 5.4 と Vue.js 2.2 と JWTAuth で、ログインできる SPA アプリケーションのチュートリアル 1/4

ただjwt-authの最新版は、Wikiが更新されていないので以下のイシューを参考に導入設定などを調整をする必要があります。
Laravel 5.5 + Vue.js 2 + JWT Auth 1.0.0-rc.1

投稿2017/12/13 09:54