迁移 php 应用程序以响应 SSO

Question

我有一个 php 应用程序，我正在尝试迁移以做出反应。我已经设法建立主页。

布局

表示层 - (SSO)

应用层

问题

我有一个 SSO 页面，它会在我无法控制的每个请求上出现。此页面使用 url /api/user/sso 对用户进行身份验证并向后端提交凭据，其中我的 .htaccess 文件将其重定向到 /index-api.php 然后我处理并将用户重定向到 /index.html加载 React 主页。

尝试使用 react-router@4 时 + 路由不起作用。如果我转到 /#/roster，我的 SSO 页面将启动，然后将 url 变为 /index.html/#/roster。如果我尝试 /roster 它说 file not found

index.js

    import React, { Component } from 'react'
import ReactDOM from 'react-dom'
import { Provider } from 'react-redux';
import { createStore, applyMiddleware, combineReducers } from 'redux';
import { BrowserRouter, Route } from 'react-router-dom';

import App from './App'
import reducers from './reducers';

require("babel-core/register");
require("babel-polyfill");

const createStoreWithMiddleware = applyMiddleware()(createStore);

ReactDOM.render(
        <Provider store={createStoreWithMiddleware(reducers)}>
            <BrowserRouter>
                <App/>
            </BrowserRouter>
        </Provider>
        , document.getElementById('root'));

App.js

import React, { Component } from 'react'
import { HashRouter, Switch, Route, Link } from 'react-router-dom';
import Header from './components/header';
import Logout from './components/logout';
import SideBar from './components/sidebar';
import HomeContent from './components/home';
import Ldapuser from './components/ldapuser';

const Main = () => (
    <main>
     <Switch>
       <Route exact path='/index.html' component={HomeContent}/>
       <Route exact path='/home' component={HomeContent}/>      
       <Route path='/logout' component={Logout}/>
       <Route path='/ldapuser' component={Ldapuser}/>
     </Switch>
    </main>
)

class App extends Component {

    render() {
        return (
            <div>
                <Header />
                <SideBar />
                <Main />
             </div>
        );
    }
}

export default App;

.htaccess

RewriteEngine On
# forbidden: malformed query strings

RewriteCond %{THE_REQUEST} [\?=][^0-9v] [NC]
RewriteRule ^assets/.* - [F]
RewriteCond %{THE_REQUEST} [\?=][^0-9.] [NC]
RewriteRule ^stylesheets/.* - [F]
RewriteCond %{THE_REQUEST} [\?=][^0-9.] [NC]
RewriteRule ^javascripts/.* - [F]

# forbidden: unnecessary request methods

RewriteCond %{REQUEST_METHOD} ^(CONNECT|DEBUG|DELETE|MOVE|PUT|TRACE|TRACK)
RewriteRule .* - [F]


RewriteRule ^iwsapi/(.*)$ index-api.php?url= [QSA,NC,L]
RewriteRule ^api/(.*)$ index-api.php?url= [QSA,NC,L]

webpack

const path = require("path");
const webpack = require("webpack");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const ExtractTextPlugin = require("extract-text-webpack-plugin");

module.exports = {
    entry: [
        'babel-polyfill',
        './app/index.js'
    ],
    output: {
        filename: '[name].bundle.js',
        path: __dirname + '/docs',
        publicPath: '/'
    },
    devServer: {
        historyApiFallback: true
    },
    module: {
        rules: [
            {
                test: /\.json$/,
                loader: "json"
            },
            {
                test: /\.js[x]?$/,
                loader: 'babel-loader',
                exclude: /node_modules/,
                query: {
                    cacheDirectory: true,
                    presets: [ 'es2015', 'es2016', 'es2017', 'latest', 'stage-0', 'react' ],
                    plugins: [ 'transform-runtime', 'transform-regenerator' ]
                }
            },
            {
                test: /\.css$/,
                use: ExtractTextPlugin.extract({
                    fallback: 'style-loader',
                    use: [
                        { loader: 'css-loader', options: { importLoaders: 1 } },
                        'postcss-loader'
                    ]
                })
            },
            {
                test: /\.(png|jpg|gif)$/,
                loader: "file-loader?name=img/img-[hash:6].[ext]"
            }
        ]
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: __dirname + '/app/index.html',
            filename: 'index.html',
            inject: true
        }),
        new webpack.DefinePlugin({
            'process.env': {
                'NODE_ENV': JSON.stringify('production')
            }
        }),
        /*new webpack.optimize.UglifyJsPlugin({
            minimize: true,
            warnings: false,
        }),*/
        new ExtractTextPlugin("[name].bundle.css")
    ]
};

更新

如果我使用 index.html 进行初始化加载，然后在 React 应用程序中单击任何 link，路由就会正常工作，它会很好地呈现组件。它在 /index.html

上尝试在没有初始化的情况下预先路由 url

所以当我打开浏览器然后指向像 /Hello 这样的路线时它不起作用，但是当我转到 /index.html 然后单击 link 转到 /Hello 它会起作用。

Answer 1

我需要 htaccess 文件底部的以下内容将所有内容重定向到 index.html

RewriteRule ^index\.html$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.html [L]

迁移 php 应用程序以响应 SSO

migrating php app to react with SSO

php

reactjs

single-sign-on

react-router-v4