Question

我正在使用laravel（几乎完成）构建一个天气应用，我决定使用react / redux / react-router来实现前端，并使用api调用中的laravel。我唯一决定保留的是带有路由和视图的自定义laravel auth实现。它的工作方式是：身份验证受控制，但是laravel以及用户登录时重定向到刀片视图（由laravel auth中间件分组），由React Router进行控制。

但是，我遇到后退按钮问题。使用react-router导航并单击注销按钮（指向laravel注销路径的链接）时，页面将重定向到欢迎页面，如预期的那样，但是使用back按钮返回到存在react-router和react组件的上一页。但是之后，当我手动刷新页面时，它会将我重定向到登录页面。（总之，一切正常，但是我想在注销后以某种方式清除路由器历史记录，并不允许用户向后导航）

我看到了许多关于React-Router和操纵历史的讨论，但没有任何效果。

有人可以帮我吗？

代码如下：

routes.php

Route::get('/', function (){
    return view('welcome');
})->middleware('guest');

Auth::routes();

Route::view('/dashboard', 'main')->middleware('auth');

Route::view('/categories', 'main')->middleware('auth');

main.blade.php

<!DOCTYPE html>
    <html lang="en">

    <head>
        <meta charset="utf-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
        <meta name="csrf-token" content="{{ csrf_token() }}">
        <title>
            ..
        </title>
        <meta content='width=device-width, initial-scale=1.0, 
          maximum-scale=1.0, user-scalable=0, shrink-to-fit=no'
          name='viewport' />
    </head>
    <body>
        <div id="app_component"></div>
        <!--   Core JS Files   -->
        <script>
            window.Laravel = {!! json_encode([
            'csrfToken' => csrf_token(),
            'apiToken' => auth()->user()->api_token ?? null,
        ]) !!};
        </script>
        <script src="{{ mix('js/app.js') }}"></script>
    </body>
    </html>

app.js（导入后）

if (document.getElementById('app_component')) {

    axios.defaults.headers.common['Authorization'] = 'Bearer ' + Laravel.apiToken;

    let store = configureStore();

    let jsx = (
        <Provider store={store}>
            <AppRouter/>
        </Provider>
    );

    let saveDataAndRenderApp = () => {
        ReactDOM.render(jsx, document.getElementById('app_component'))
    }

    store.dispatch(startCheckAuth()).then(()=>{      *** axios call
        store.getState().checkAuth.auth ?
            saveDataAndRenderApp()
            :
            store.dispatch(startLogoutUser()).then(()=>{
            location.assign('localhost/logout')
        })
    });
}

Approuter.js（导入后）

export const history = History();

class AppRouter extends React.Component {
    render(){
        return (
            <Router history={history}>
                <div className="wrapper">
                    <Sidebar/>
                    <div className="main-panel">
                        <Navbar/>
                        <Switch>
                            <Route path='/dashboard' component={Dashboard} exact/>
                            <Route path='/categories' component={Category} exact/>
                            <Route path='/create' component={Create} exact/>
                            <Route component={NotFound}/>
                        </Switch>
                    <Footer/>
                    </div>
                </div>
            </Router>
        );
    }
}

export default connect()(AppRouter)

页眉组件中的退出按钮

    class NavbarUI extends React.Component {
        constructor(props){
            super(props);
            this.logout = this.logout.bind(this)
        }
        logout(){
            this.props.dispatch(startLogoutUser()).then(()=>{
                location.assign('localhost/logout')  
            })
        }
        render() {
            return (
                <nav >...
<button onClick={this.logout}>Logout</button>              
                </nav>
            );
        }
    }

    export default withRouter(connect()(NavbarUI))

和动作

let logoutUser = () => {
    return {
        type: 'LOGOUT'
    }
}

export let startLogoutUser = () => {
    return (dispatch) => {
        return new Promise((resolve)=>{
            dispatch(logoutUser())
            resolve()
        })
    }
}

Answer 1

我的问题已解决，它在laravel中创建了一个中间件，该中间件防止了缓存控制，并应用于了我以react-router实现为目标的每个Route。

对于将反应/反应路由器与laravel结合使用的人来说可能会有所帮助，因为有人可能会遇到相同的情况。

非常感谢Remul向我评论了solution！

Laravel的奇怪行为-反应路由器和后退按钮

1 个答案: