как обрабатывать перенаправление входа в систему на панели инструментов в реагировать - PullRequest
Новая
       9

как обрабатывать перенаправление входа в систему на панели инструментов в реагировать

1 голос
/ 09 апреля 2019

У меня проблемы с перенаправлением после входа в систему. Как я знаю, Fetch API не имеет концепции обработки этого. Я пытался использовать React-router-dom, но он не работает. Я не знаю, что я делаю по-другому. Я пытаюсь научиться основам реагировать, разработать приложение, которое полностью аутентифицировано.

Я сделал это 

import {  BrowserRouter as Router, Route, Redirect} from 'react-router-dom';
import Dashboard from './Dashboard';

Это состояние 

this.state = {
redirect: false, 
username: '', 
l_password: ''
}

API Fetch и функция setRedirect 

setRedirect =() =>{
        this.setState({
          redirect: true
        });
      }
      handleLogin =(event) =>{
      event.preventDefault();

      fetch('/oauth/token',
         {
            method: "POST",
            headers:{
                'Accept': 'application/json',
                'Content-Type': 'application/x-www-form-urlencoded',
            },
            body:`grant_type=password&username=${this.state.username}&password=${this.state.l_password}&client_id=4&client_secret=LT7raDKvPwIUrDFJBISlhpzAXu6cSYiLBGhrUmTm&scope=*`

         }
      )
      .then(response =>
         response.json()

      )
      .then(responseJson => {
          const returnObj = responseJson;
          console.log(returnObj);
          sessionStorage.setItem('resData', JSON.stringify(returnObj));
          console.log(this.state.redirect);
          if(this.state.redirect === true){
               return (
                   <Router><Route path="/dashboard" component={Dashboard} /></Router>
               );
           }
           else{
            <Redirect to="/" />
           }

      });

        this.setState({
            username: '',
            l_password:''
        });
}

Форма 

 <Form onSubmit={this.handleLogin}>
                                <Form.Group controlId="formBasicEmail">
                                    <Form.Label>Email address</Form.Label>
                                    <Form.Control type="email" placeholder="Enter email"
                                     autofoccus="true"
                                     autoComplete="new-email"
                                     onChange= {this.ChangeText}
                                     name="username"
                                     value={this.state.username}
                                    />
                                </Form.Group>

                                <Form.Group controlId="formBasicPassword">
                                    <Form.Label>Password</Form.Label>
                                    <Form.Control type="password" placeholder="Password" autoComplete="new-password"
                                     onChange= {this.ChangeText}
                                     name="l_password"
                                     value={this.state.l_password}
                                    />
                                </Form.Group>

                                <Button
                                onClick={this.setRedirect.bind(this)}

                                variant="primary" type="submit" size="lg" block>
                                    Login
                                </Button>
                                <Form.Group controlId="formBasicChecbox">
                                    <Form.Check type="checkbox" label="Remember" />
                                   <a href="#" style={{float:'right', marginTop:-23}}>Forgot Password?</a>
                                </Form.Group>
                                <div id="error"></div>
                                <div className="clear-fix"></div>
                                <hr/>

                            </Form>

То, чего я намерен добиться, - это перенаправить страницу на панель инструментов, если перенаправление имеет значение true, в противном случае - домашняя страница

enter image description here

Ответы [ 4 ]

1 голос
/ 10 апреля 2019

Сначала импортируйте withRouter в ваш реактив-маршрутизатор, затем добавьте this.props.history.push ('/ dashboard') в функцию handleLogin после того, как вы выполнили условия входа в систему. 

handleLogin =(event) =>{
      event.preventDefault();

      fetch('/oauth/token',
         {
            method: "POST",
            headers:{
                'Accept': 'application/json',
                'Content-Type': 'application/x-www-form-urlencoded',
            },
            body:`grant_type=password&username=${this.state.username}&password=${this.state.l_password}&client_id=4&client_secret=LT7raDKvPwIUrDFJBISlhpzAXu6cSYiLBGhrUmTm&scope=*`

         }
      )
      .then(response =>
         response.json()

      )
      .then(responseJson => {
          const returnObj = responseJson;
          console.log(returnObj);
          sessionStorage.setItem('resData', JSON.stringify(returnObj));
          ....
          this.props.history.push('/dashboard')

      });


}

В конце класса добавьте экспорт по умолчанию withRouter (имя вашего класса)

Для получения дополнительной информации ознакомьтесь с этим руководством. введите описание ссылки здесь

0 голосов
/ 09 апреля 2019 
class App extends Component {render() {
return (
  <div>
    <NavBar />
    <div className="content">
      <Switch>
        <Route path="/products/:id" component={ProductDetails} />
        <Route
          path="/products"
          render={props => <Products sortBy="newest" {...props} />}
        />
        <Route path="/posts/:year?/:month?" component={Posts} />
        <Redirect from="/messages" to="/posts" />
        <Route path="/admin" component={Dashboard} />
        <Route path="/not-found" component={NotFound} />
        <Route path="/" exact component={Home} />
        <Redirect to="/not-found" />
      </Switch>
    </div>
  </div>
);}}

Проверьте этот код.В проекте, который я сделал, я использовал реакционный маршрутизатор dom.

импортируйте его со следующим кодом: 

import { Route, Switch, Redirect } from 'react-router-dom';

Я предлагаю вам прочитать больше о маршрутизации, Мош Хамедани делает отличные уроки на YouTube ина своем сайте:)

0 голосов
/ 09 апреля 2019

https://reacttraining.com/react-router/web/api/Redirect

Не возвращать Route компонент в вашей функции setRedirect.

Создайте Route в своем приложении и установите состояние, например. shouldRedirect в конце концов setRedirect звонит, например, 

.then(responseJson => {
  const returnObj = responseJson;
  console.log(returnObj);
  ...
  setState({shouldRedirect: this.state.redirect})
})

<Router>
  <Route exact path="/" render={() => (
    shouldRedirect ? (
    <Redirect to="/dashboard"/>
    ) : (
    <PublicHomePage/>
    )
  )}/>
</Router>

Также вы можете проверить хороший рабочий пример здесь: https://reacttraining.com/react-router/web/example/auth-workflow

0 голосов
/ 09 апреля 2019

Я полагаю, что срабатывает онклик, когда уже слишком поздно? Попробуйте установить значение true в начале вашего метода handleLogin 

handleLogin = (event) => {
    event.preventDefault();

    this.setState({
      redirect: true
    });     

    fetch('/oauth/token',...
...