迁移 php 应用程序以对 SSO 做出反应

Question

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

布局

表示层 - (SSO)

应用层

问题

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

当尝试使用 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=$1 [QSA,NC,L]
RewriteRule ^api/(.*)$ index-api.php?url=$1 [QSA,NC,L]

网络包

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 应用程序中单击它可以很好地呈现组件的任何链接，则路由将起作用。它在尝试在 /index.html 上预路由没有初始化的 url 时

所以当我打开浏览器然后指向/Hello 之类的路线时，它将不起作用，但是当我转到/index.html 然后单击链接转到/Hello 时它将起作用。

Answer 1

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

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