#javascript #reactjs #cookies #redux #react-redux
#javascript #reactjs #файлы cookie #redux #react-redux
Вопрос:
В настоящее время в моем корневом компоненте он настроен на прямой переход на страницу входа по умолчанию. Но я хотел бы настроить его так, чтобы он проверял, существует ли токен уже в локальном хранилище, и если да, пропустите страницу входа в систему и перейдите непосредственно на домашнюю страницу.
С помощью следующего настроенного мной кода он переходит на домашнюю страницу, но на долю секунды появляется страница входа в систему перед переходом на домашнюю страницу.
Как я могу перейти непосредственно на домашнюю страницу, не отображая домашнюю страницу вообще?
Вот код:
import React from 'react';
import {render} from 'react-dom';
import configureStore from '../redux/store'
import { Provider } from 'react-redux'
import { Router, Route, IndexRoute, hashHistory } from 'react-router'
import cookie from 'react-cookie';
import actions from '../redux/actions'
import Login from '../components/Login'
import App from '../components/App'
import Home from '../components/Home'
let store = configureStore(initialState)
//Takes the token from local storage and set to const token
const token = cookie.load('token');
//This checks to see if the token exists in the local storage, and if it does, it enters the if statement and goes directly to the Home component.
if(token) {
window.location.href = 'http://localhost:3000/#/App'
}
render(
<div>
<Provider store={store}>
<Router history={hashHistory}>
<Route
component={Login}
path='/'
/>
<Route
component={App}
path='App'
>
<IndexRoute
component={Home}
/>
</Route>
</Router>
</Provider>
</div>,
document.getElementById('app')
)
Комментарии:
1. Проверьте токен в
componentWillMount
функцииLoginComponent
и, если есть токен, используйте API-интерфейс React-Router для перехода к дому2. @niba Вероятно, стоит представить это в качестве ответа и подробнее. Это определенно решит эту проблему, но может быть полезно иметь правильный ответ для будущих читателей!
3. я использую метод push — импорта {push} из ‘react-router-redux’ для перенаправления вручную
4. @abhirathore2006 Извините, но для пояснения не могли бы вы показать в качестве ответа код, который я предоставил? Так что я могу проголосовать и принять ответ. Спасибо
5. я опубликовал ответ ниже со ссылкой на код и документ.
Ответ №1:
Я бы создал корневой компонент с именем loginCheck, в этом компоненте вы бы использовали перехват жизненного цикла componentWillMount, чтобы определить, вошел ли пользователь в систему или нет. Если пользователь вошел в систему, он перейдет на правильную страницу, в противном случае он перенаправит на страницу входа.
Надеюсь, это поможет.
Ответ №2:
Надеюсь, это поможет.
import {browserHistory} from 'react-router';
export class Home extends React.Component{
constructor(props, context)
{
super(props, context);
}
componentWillMount() {
if(token)
{
browserHistory.push("YOUR AUTHENTICATED PAGE");
}
}
}
Ответ №3:
вы можете написать что-то подобное в component will mount
import { push } from 'react-router-redux';
//login component
componentWillMount(){
if(token){
this.props.dispatch(push("/home"));
}
}
Объяснение из документации React-Router-Redux
Что, если я хочу выдавать события навигации с помощью действий Redux?
React Router предоставляет одноэлементные версии истории (browserHistory и hashHistory), которые вы можете импортировать и использовать из любого места вашего приложения. Однако, если вы предпочитаете действия в стиле Redux, библиотека также предоставляет набор создателей действий и промежуточное программное обеспечение для их захвата и перенаправления в ваш экземпляр истории.
импорт {createStore, combineReducers, applyMiddleware } из ‘redux’; импорт {routerMiddleware, push } из ‘react-router-redux’
// Применить промежуточное программное обеспечение к хранилищу const промежуточное программное обеспечение = routerMiddleware(browserHistory) const хранилище = createStore(
редукторы, applyMiddleware (промежуточное ПРОГРАММНОЕ обеспечение))// Отправка из любого места, как обычно. store.dispatch(push(‘/ foo’))