Идеальный способ проверить токен аутентификации django x реакции - PullRequest
Новая
       51

Идеальный способ проверить токен аутентификации django x реакции

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

Я очень новичок в React. js, поэтому я прошу прощения, если я задаю плохой вопрос. Прямо сейчас я только что закончил делать аутентификацию, однако есть некоторые проблемы, с которыми я сталкиваюсь, и хотел бы знать, как лучше всего аутентифицировать запрос на получение / публикацию запроса. Я использую Redux для хранения состояний аутентификации.

Вход в систему

После заполнения формы я введу метод onFini sh, который вызовет диспетчер для входа пользователя в систему. Как только задача входа в систему будет успешной, я получу токен, который я проверю для этого токена в моем методе рендеринга (я не уверен, что это также лучший способ сделать что-то? С большой вероятностью он сломается): 

class Demo extends React.Component {
formRef = React.createRef();

  onFinish = values => {
    this.props.onAuth(values.username, values.password)
    }

  onFinishFailed = errorInfo => {
    console.log('Failed:', errorInfo);
  };

  render() {
    let errorMessage = null;
    if (this.props.error) {
        errorMessage = (
            <p>{this.props.error.message}</p>
        );
    }
    if (this.props.token) {          #<------- where i do the redirection , i will check for a token first.
      return <Redirect to="/" />;
    }
    return (
        <div>
            {errorMessage}
            {
                this.props.loading ?

                <Spin size="large" />

                :


              <Form
              {...layout}
              name="basic"
              initialValues={{
                remember: true,
              }}
              onFinish={this.onFinish}
              onFinishFailed={this.onFinishFailed}
              >
              <Form.Item
                label="Username"
                name="username"
                rules={[
                  {
                    required: true,
                    message: 'Please input your username!',
                  },
                ]}
              >
                <Input />
              </Form.Item>

              <Form.Item
                label="Password"
                name="password"
                rules={[
                  {
                    required: true,
                    message: 'Please input your password!',
                  },
                ]}
              >
                <Input.Password />
              </Form.Item>

              <Form.Item {...tailLayout}>
                <Button type="primary" htmlType="submit">
                  Login
                </Button>
              </Form.Item>
              </Form>
            }
      </div>
    )
  }
}



const mapStateToProps = (state) => {
    return {
        loading: state.loading,
        error: state.error,
        token: state.token
    }
}

const mapDispatchToProps = dispatch => {
    return {
        onAuth: (username, password) => dispatch(actions.authLogin(username, password)) 
    }
}

export default connect(mapStateToProps, mapDispatchToProps)(Demo);

перенаправление

Далее после перенаправления я буду переведен на страницу "/". Здесь простого componentDidMount было бы достаточно для перезагрузки страницы, так как токен все еще доступен. Однако, когда пользователь «обновляет» страницу, токен исчезает, и мне необходимо получить новый токен.

Поэтому я использую 2 метода для извлечения контента из DRF, первый - componentDidMount, чтобы захватить контент, когда страница перенаправляет с входа в систему, второй - componentDidUpdate, чтобы захватить контент при обновлении страницы. . 

class ArticleList extends React.Component {
state = {
    articles: []
  };

  fetchArticles = () => {
    axios.defaults.headers = {
      "Content-Type": "application/json",
      Authorization: `Token ${this.props.token}`
    };
    axios.get("http://127.0.0.1:8000/api/").then(res => {
      this.setState({
        articles: res.data
      });
    });
  }

  componentDidMount() {              #this is for getting the articles upon successful redirection
    if (this.props.token) {
      this.fetchArticles();      
    }
  }

  componentDidUpdate(oldProps) {        #this is for getting articles upon refreshing
    if (this.props.token !== oldProps.token ) {
      this.fetchArticles();      
    }
  }

  render() {
    return (
      <div>
        <Articles data={this.state.articles} /> <br />
        <h2> Create an article </h2>
        <CustomForm requestType="post" articleID={null} btnText="Create" />
      </div>
    );
  }
}

const mapStateToProps = state => {
  return {
    token: state.token
  };
};

export default connect(mapStateToProps)(ArticleList);

получение нового токена при обновлении страницы

Всякий раз, когда мое приложение монтируется, я отправляю редуктор, чтобы помочь проверить состояние токена, а также установить refre * 1031. * новый токен для состояния, если он еще доступен: 

class App extends Component {    
  componentDidMount() {
    this.props.onTryAutoSignup();
  }

  render() {
    return (
      <div>
        <Router>
          <CustomLayout {...this.props}>
                <BaseRouter/>
          </CustomLayout>
        </Router>
      </div>
    );
  }
}

const mapStateToProps = state => {
  return {
    isAuthenticated: state.token !== null ,
    token : state.token
  }
}

const mapDispatchToProps = dispatch => {
  return {
    onTryAutoSignup: () => dispatch(actions.authCheckState())
  }
}

export default connect(mapStateToProps, mapDispatchToProps)(App);

Я опробовал приведенную выше комбинацию, и время, затраченное на выполнение указанных выше задач для простой ссылки sh, было очень медленным. Потребовалось 3-4 секунды, чтобы консоль распечатала реквизит на странице componentDidUpdate и componentDidMount.

Мой вопрос: есть ли лучший способ оптимизировать этот процесс аутентификации? Где я должен разместить свои перенаправления и проверку токенов? Кажется, что это очень легко сломать.

Заранее спасибо!

...