Я создаю приложение погоды с laravel (почти готово), и я решил реализовать интерфейс с реакцией / redux / реагировать на маршрутизатор и использовать laravel из вызовов API.Единственное, что я решил оставить прежним, это моя собственная реализация laravel auth с маршрутами и представлениями.Это работает так: Аутентификация контролируется, но laravel и, когда пользователь входит в систему, перенаправляется на блэйд-вид (сгруппированный по промежуточному программному обеспечению laravel auth), откуда реагирует роутер.
Однако я столкнулся с проблемой, связанной с обратной связью.кнопка.При навигации по реагирующему маршрутизатору и нажатии кнопки выхода из системы (ссылка, которая указывает на маршрут выхода из системы Laravel), страница перенаправляется на страницу приветствия, как и ожидалось, но с кнопкой возврата возвращается на предыдущую страницу, где существуют компоненты реакции-маршрутизатора и реагирования.Но после того, как я вручную обновляю страницу, он перенаправляет меня на страницу входа.(в итоге все работает, но я хочу как-то после выхода из системы очистить историю маршрутизатора и не позволить пользователю вернуться обратно)
Я видел много обсуждений о реакции-маршрутизатора и манипулировании историей, но ни одна не работала.
Может кто-нибудь помочь мне?
Вот код:
rout.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()
})
}
}