Блог

В настоящее время в моем корневом компоненте он настроен на прямой переход на страницу входа по умолчанию. Но я хотел бы настроить его так, чтобы он проверял, существует ли токен уже в локальном хранилище, и если да, пропустите страницу входа в систему и перейдите непосредственно на домашнюю страницу.

С помощью следующего настроенного мной кода он переходит на домашнюю страницу, но на долю секунды появляется страница входа в систему перед переходом на домашнюю страницу.

Как я могу перейти непосредственно на домашнюю страницу, не отображая домашнюю страницу вообще?

Вот код:

 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')
)
  

Я бы создал корневой компонент с именем loginCheck, в этом компоненте вы бы использовали перехват жизненного цикла componentWillMount, чтобы определить, вошел ли пользователь в систему или нет. Если пользователь вошел в систему, он перейдет на правильную страницу, в противном случае он перенаправит на страницу входа.

Надеюсь, это поможет.

Надеюсь, это поможет.

 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");
          }

        }
    }
  

вы можете написать что-то подобное в 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’))