En React Router, ¿cómo permanecer conectado incluso al actualizar la página?

La guía o código que verás en este post es la solución más sencilla y efectiva que hallamos a esta inquietud o problema.

Solución:

Otra forma de hacerlo es usar JSON Web Tokens (JWT) que se requieren para cada ruta y localStorage para verificar el JWT.

TL;RD

• En el front-end, tiene una ruta de inicio de sesión y registro que consulta su servidor en busca de un JWT de acuerdo con la autenticación en el servidor. Una vez que haya pasado el JWT apropiado, establecería una propiedad de estado para
  true. Puede tener una ruta de cierre de sesión que permita al usuario establecer este estado en false.

• El index.js que contiene sus rutas puede verificar el almacenamiento local antes de renderizar, eliminando así su problema de perder el estado al actualizar pero manteniendo cierta seguridad.

• Todas las rutas que requieren autenticación en su aplicación se procesan a través de un componente compuesto y se protegen con la necesidad de tener JWT en el encabezado para autorización en la API del servidor.

Configurar esto lleva un poco de tiempo, pero hará que su aplicación sea ‘razonablemente’ segura.

---

Para resolver tu problema:

Comprueba el almacenamiento local antes de las rutas en tu index.js como se muestra a continuación, actualizando el estado a autenticado si es necesario.

La aplicación mantiene la seguridad con el hecho de que la API está protegida por JWT, lo que resolvería su problema de actualización y mantendría un enlace seguro a su servidor y datos.

Así en las rutas tendrías algo como esto:

índice.js

import React from 'react';
import ReactDOM from 'react-dom';
import  Provider  from 'react-redux';
import  createStore, applyMiddleware, compose  from 'redux';
import  Router, Route, browserHistory, IndexRoute  from 'react-router';
import reduxThunk from 'redux-thunk';
import  AUTHENTICATE_THE_USER  from './actions/types';
import RequireAuth from './components/auth/require_auth';
import reducers from './reducers';

/* ...import necessary components */

const createStoreWithMiddleware = compose(applyMiddleware(reduxThunk))(createStore);

const store = createStoreWithMiddleware(reducers);

/* ... */

// Check for token and update application state if required
const token = localStorage.getItem('token');
if (token) 
    store.dispatch( type: AUTHENTICATE_THE_USER );


/* ... */

ReactDOM.render(
  
    
      
        
        
        
        
        
        ... some other route requires logged in ...
      
    
  
  , .getElementById('entry'));

RequiredAuth es el componente compuesto mientras que Graph y IsAuthenticated (puede ser cualquier número de componentes con nombres apropiados) requieren el state.authenticated ser – estar true.

Los Componentes, en este caso Graph y IsAuthenticated prestado si el state.authenticated es true. De lo contrario, vuelve por defecto a la ruta raíz.

---

Luego, podría construir un componente compuesto como este, a través del cual se representan todas sus rutas. Comprobará que el estado en el que se encuentra, tanto si el usuario está autenticado como si no (un valor booleano), es true antes de renderizar.

require_auth.js

import React,  Component  from 'react';
import  connect  from 'react-redux';

export default function (ComposedComponent) 

  // If user not authenticated render out to root

  class Authentication extends Component 
    static contextTypes = 
      router: React.PropTypes.object
    ;

    componentWillMount() 
      if (!this.props.authenticated) 
        this.context.router.push('/');
      
    

    componentWillUpdate(nextProps) 
      if (!nextProps.authenticated) 
        this.context.router.push('/');
      
    

    render() 
      return ;
    
  

  function mapStateToProps(state) 
    return  authenticated: state.authenticated ;
  

  return connect(mapStateToProps)(Authentication);

---

En el lado de registro/inicio de sesión, puede crear una acción que almacene el JWT y configure el estado para autenticar a través de un creador de acciones -> tienda redux. Este ejemplo utiliza axios para ejecutar el ciclo de respuesta de solicitud HTTP asíncrono.

export function signinUser( email, password ) 

  // Note using the npm package 'redux-thunk'
  // giving direct access to the dispatch method
  return function (dispatch) 

    // Submit email and password to server
    axios.post(`$API_URL/signin`,  email, password )
      .then(response => 
        // If request is good update state - user is authenticated
        dispatch( type: AUTHENTICATE_THE_USER );

        // - Save the JWT in localStorage
        localStorage.setItem('token', response.data.token);

        // - redirect to the route '/isauthenticated'
        browserHistory.push('/isauthenticated');
      )
      .catch(() => 
        // If request is bad show an error to the user
        dispatch(authenticationError('Incorrect email or password!'));
      );
  ;
 

---

También necesitaría configurar su tienda (Redux en este caso) y el creador de acciones, por supuesto.

La seguridad ‘real’ proviene del back-end. Y para hacer esto, usa localStorage para mantener el JWT en el front-end y pasarlo en el encabezado a cualquier llamada API que tenga información confidencial/protegida.

Crear y analizar el JWT para los usuarios en la API del servidor es otro paso. He encontrado que el pasaporte es efectivo.

valoraciones y comentarios

Si estás contento con lo expuesto, eres capaz de dejar un tutorial acerca de qué le añadirías a esta reseña.

---

---

Utiliza Nuestro Buscador