Реагировать на рендеринг до того, как метод fetch получит токен с сервера - PullRequest
Новая
       33

Реагировать на рендеринг до того, как метод fetch получит токен с сервера

0 голосов
/ 25 ноября 2018

У меня в приложении React есть файл JS, который подключается к серверу, отправляет имя пользователя и пароль, получает oauth-токен с сервера и сохраняет его в локальном хранилище.Однако перед токеном, полученным реакцией, реактив отправляет следующий запрос перед токеном, хранящимся в локальном хранилище.Что приводит к 401 несанкционированному доступу.

AuthService.js 

 login(username, password) {
    console.log(username);
     return this.fetch(`${this.domain}/api/AuthAPI/getCredentials`, {
        headers: {
            'Access-Control-Allow-Origin': "*"    
        }
    }).then(res => {
        this.fetch(`${this.domain}/Token`, {
            method: 'POST',
            body: 'grant_type=password&username=' + res[0]
        }).then(response => {
            var date_token_issue = new Date();
            this.setToken(response.access_token,response.expires_in, date_token_issue) // Setting the token in localStorage
            return Promise.resolve(response);
        })
    })

}

setToken(idToken,expires, date_token_issue ) {
    localStorage.setItem('id_token', idToken)
    localStorage.setItem('expires', expires)
    localStorage.setItem('date_token_issue', date_token_issue)
}

SignIn.jsx 

import React, { Component } from 'react'
import AuthService from '../comonents/AuthService';
import Orders from '../../app/orders/orders'
import { Redirect, Switch, Route} from "react-router-dom";
export default function SignIn(AuthComponent){
const Auth = new AuthService('http://localhost:53050');

return class AuthWrapped extends Component {
  constructor() {
    super();
    this.state = {
        user: null,
        loggedIn: false
    }
}

async componentDidMount() {
  if (!Auth.loggedIn()) {
    const promise = await  Auth.login('m.dawaina', 'm.dawaina');
    console.log(promise)
    this.setState({loggedIn: true});
  }
  else {
      try {            
        this.setState({loggedIn: true})
          const profile = Auth.getProfile()
          this.setState({
              user: profile
          })               
      }
      catch(err){
          Auth.logout()
          //this.props.history.replace('/login')
      }
  }
 }

render() {
if (this.state.loggedIn) {      

    return (
      <div>  
        <Redirect to='/orders'/>       
        <Switch>
          <Route path="/orders" component={Orders} />         
        </Switch>
      </div>
    )
}
else {
  return (       
          <AuthComponent history={this.props.history} user={this.state.user} />
         )
     }
   }

 }
}

Iнужен способ принудительно реагировать на ожидание, когда JS получит токен и сохранит его в локальном хранилище, и предотвратит отправку следующего запроса на реагирование, пока он не обнаружит токен, хранящийся в локальном хранилище.

1 Ответ

0 голосов
/ 25 ноября 2018 
login(username, password) {
console.log(username);
 return this.fetch(`${this.domain}/api/AuthAPI/getCredentials`, {
    headers: {
        'Access-Control-Allow-Origin': "*"    
    }
}).then(res => {
    // Add a return here
    return this.fetch(`${this.domain}/Token`, {
        method: 'POST',
        body: 'grant_type=password&username=' + res[0]
    }).then(response => {
        var date_token_issue = new Date();
        this.setToken(response.access_token,response.expires_in, date_token_issue) // Setting the token in localStorage
        return Promise.resolve(response);
    })
})

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

...