【发布时间】：2019-04-26 04:05:44
【问题描述】：
我正在用 laravel 构建一个天气应用程序（几乎完成），我决定用 react/redux/react-router 实现前端，并使用来自 api 调用的 laravel。我决定保持不变的唯一一件事是我的带有路由和视图的自定义 laravel auth 实现。它的工作方式是：身份验证受控制，但 laravel 并且当用户登录时，被重定向到刀片视图（由 laravel auth 中间件分组），从那里反应路由器控制。
但是我遇到了后退按钮的问题。当使用 react-router 导航并点击注销按钮（指向 laravel 注销路由的链接）时，页面会重定向到预期的欢迎页面，但使用后退按钮会返回到存在 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)
Header 组件内的注销按钮
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。
-
非常感谢伙计！你拯救了我的一天。大声笑我正在寻找反应解决方案或js。我不认为它可以用 laravel 解决：-D
-
“当使用 react-router 导航并点击注销按钮（指向 laravel 注销路由的链接）时，页面会重定向到预期的欢迎页面”。就我而言，这就是我想要的，所以我想知道你是怎么得到的。在我的代码中，注销实际上到达了后端路由（和页面），但它只能在 React Devtools 中看到，而浏览器仍然显示当前的 React 组件。现在我看到了我错过的内容，我应该添加： location.assign 重定向到我预期的登录页面。在我的上一个项目中，我必须使用 React 而不是 Blade 来实现登录页面。现在我可以选择两种方式。
标签： javascript php reactjs laravel redux