Попытка проверить токен sessionStorage и заменить путь - не работает в reactjs - PullRequest
Новая
       5

Попытка проверить токен sessionStorage и заменить путь - не работает в reactjs

0 голосов
/ 07 апреля 2020

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

Любая помощь будет оценена. 

import React, { Component } from 'react';
import { BrowserRouter as Router, Route, Link} from 'react-router-dom';
//import $ from 'jquery';
import Home from './home';
import About from './about';
import Contact from './contactus';
import Register from './register';
import Deshboard from './Deshboard/deshboard';

class MenuBar extends Component
{
  requireAuth(nextState,replace)
      {
         var token = sessionStorage.getItem("authtoken_Session");   
         if(token != null)
         {
             replace({pathname: '/deshboard'});
         }
         else{
            replace({pathname: '/register'});
         }
     }

  render()
    {
        return (
            <Router>
                <div className="App-header">
                        <div className="row">
                            <div className="col-md-4"></div>
                            <div className="col-md-6"></div>
                            <div className="col-md-1">
                                  <div className="myAccount"><Link to="/register">My Account</Link></div>                                  
                             </div>
                             <div className="col-md-1"></div>
                        </div>                        
                    </div>  
                <div className="app-menu">                     
                                <ul className="clear-fix">
                                    <li><Link to="/">Home</Link> </li>
                                    <li><Link to="/about">About</Link> </li>
                                    <li><Link to="/contact">Contact</Link> </li>                                    
                                </ul> 
                        <div className="clear"> </div>
                    </div>
                <div className="body">
                    <Route exact path="/" component={Home}/>
                    <Route path="/about" component={About}/>
                    <Route path="/contact" component={Contact}/>                    
                    <Route path="/register" component={Register} onEnter={this.requireAuth}/>
                    <Route path="/deshboard" component={Deshboard} onEnter={this.requireAuth}/>
                </div>
            </Router>
        );
    };
}

export default MenuBar;

1 Ответ

0 голосов
/ 07 апреля 2020

onEnter устарел и не будет работать. Вам нужна render prop, или вы можете создать свой собственный PrivateRoute, который будет выполнять проверки, связанные с аутентификацией, а затем вы можете либо перенаправить, либо визуализировать какой-либо другой компонент.

Вот полный пример из документа activ-router-dom.

https://reacttraining.com/react-router/web/example/auth-workflow

...