Перенаправить на страницу входа в реагировать маршрутизатор 4

Question

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

Вот мой app.js: -

import React, { Component } from 'react';
import { Route, Switch, Redirect } from 'react-router-dom';
import Login from './components/login/login.js'
import Protected from './components/protected/protected.js'

import './App.css';

class App extends Component {

  state = {
    loggedIn: false // user is not logged in
  };

  render() {

    return (
        <Switch>
          <Route path="/protected" component={Protected}/>
          <Route path="/login" component={Login}/>
        </Switch>
    );
  }
}

export default App;

В приведенном выше сценарии я хочу, чтобы пользователь перенаправлялся на страницу / login, если состояние loggedIn имеет значение false, иначе он должен перейти на / protected страницу

Answer 1

Вы можете сделать следующее с помощью redux-saga,

import jwt_decode from 'jwt-decode';

//define you saga in store file here
import {store, history} from './store';

// Check for token
if (localStorage.jwtToken) {
// Set auth token header auth
setAuthToken(localStorage.jwtToken);
// Decode token and get user info and exp
const decoded = jwt_decode(localStorage.jwtToken);
// Set user and isAuthenticated
store.dispatch(setCurrentUser(decoded));

// Check for expired token
const currentTime = Date.now() / 1000;
if (decoded.exp < currentTime) {
    // Logout user
    store.dispatch(logoutUser());
    // Clear current Profile
    store.dispatch(clearCurrentProfile());
    // Redirect to login
    window.location.href = '/login';
}
}
const setAuthToken = token => {
if (token) {
// Apply to every request
axios.defaults.headers.common['Authorization'] = token;
} else {
// Delete auth header
delete axios.defaults.headers.common['Authorization'];
}
};

  // Set logged in user
export const setCurrentUser = decoded => {
return {
  type: SET_CURRENT_USER,
  payload: decoded
 };
};

// Clear profile
const clearCurrentProfile = () => {
return {
  type: CLEAR_CURRENT_PROFILE
};
};

  // Log user out
const logoutUser = () => dispatch => {
// Remove token from localStorage
localStorage.removeItem('jwtToken');
// Remove auth header for future requests
setAuthToken(false);
// Set current user to {} which will set isAuthenticated to false
dispatch(setCurrentUser({}));
};

// render part 
 render() {
    return (
        <Provider store={store}>
              <ConnectedRouter history={history}>
                {/* Switch stops searching for the path once the match is found */}
                 <Switch>
                    {/* <div> */}
                    <Route exact path="/"  component={Landing} />
                    <Route exact path="/signup" component={Signup} />
                    <Route exact path="/login" component={Login} />
                    <Route exact path="/forgotpassword" component={ForgotPassword} />
                    <Route exact path="/not-found" component={NotFound} />
                    <Route exact path="/resetpassword" component={ResetPassword} />
                    {/* Do not pass 'exact' props. It won't match /dashboard/other_url */}
                    <Route path="/dashboard" component={DefaultLayout} />
                    {/* </div> */}
                </Switch>
            </ConnectedRouter>
        </Provider>
    );

}

// .store file if you need
    import { createBrowserHistory } from 'history'
import {createStore, applyMiddleware } from  'redux';
import { routerMiddleware } from 'connected-react-router'
import { composeWithDevTools } from 'redux-devtools-extension/logOnlyInProduction';
import createSagaMiddleware from 'redux-saga'


import rootReducer from './reducers'
import rootSaga from './sagas/';

export const history = createBrowserHistory();
const sagaMiddleware = createSagaMiddleware()

const myRouterMiddleware = routerMiddleware(history);

const initialState = {};

const middleWare = [myRouterMiddleware,sagaMiddleware];

export const store = createStore(rootReducer(history), 
    initialState,
    composeWithDevTools(applyMiddleware(...middleWare))
);

sagaMiddleware.run(rootSaga);

Answer 2

Я обычно создаю PrivateRoute компонент, который проверяет, вошел ли пользователь в систему (через prop, redux, localalstorage или что-то еще).

Что-то вроде:

const PrivateRoute = ({ isLoggedIn, ...props }) =>
  isLoggedIn
    ? <Route { ...props } />
    : <Redirect to="/login" />

В роутере я использую его для моих, ну, частных маршрутов:)

<Switch>
  <PrivateRoute isLoggedIn={ this.state.loggedIn } path="/protected" component={Protected} />
  <Route path="/login" component={Login}/>
</Switch>