Question

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

布局

表示层 - （SSO）

应用层

问题

我有一个SSO页面，每个我无法控制的请求都会被点击。此页面对用户进行身份验证并使用网址/api/user/sso向后端提交凭据，其中我的.htaccess文件将其重定向到/index-api.php然后我处理并将用户重定向到/index.html页。

当尝试使用react-router @ 4 +时，路由不起作用。如果我转到/#/roster我的SSO页面踢，然后将网址转为/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]

的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执行init加载，然后在任何链接上的react应用程序中单击，它会使组件正常运行。它试图在/index.html

上没有init的情况下预先路由网址

所以，当我打开浏览器，然后指向/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]

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

1 个答案: