2017-10-04 12 views
0

皆さん、ありがとうございました。 私はむしろこれを新しくしています。
クライアントは、私がIndex.htmlにリンクしている(安全上の理由から)jQueryで独自に認証を行うことを主張しました。認証に成功すると、jQueryは[オブジェクトオブジェクト]を含むアラートウィンドウで応答します。
私はステータスコード200に基づいてログインページからAppLayoutページにリダイレクトするように指示されています。これについて反応文書には何も見つかりません。
私のサーバーとのやり取りは、Swagger APIによるものです。 私は、他のすべてのAPI要求に対して、react-routerとaxiosでcreate-react-appを使用しています。
ステータスコードをターゲットにし、その条件に基づいてリダイレクトを行う方法はありますか?
そうでなければ、Axiosのみを使用して最も安全な認証方法を提案し、jQueryを削除できますか?
私はそれが遠いフェッチだと知っていますが、どんな提案/リンクも大歓迎です。React:ステータスコード200に基づいてログインページからAppLayoutページにリダイレクトする方法は?

多くの感謝!

答えて

0

これは間違いなく可能です。最良の選択肢は、Axiosを使用してアプリ内認証を実行することです。実装の詳細は、React-Routerのバージョンによって異なります。 v4を仮定すると、history.push( '/ new-route')メソッドを使用して、app内の新しいルートに移動することができます。または、同様の機能を実行するリダイレクトコンポーネントを使用することもできます。 docs here:https://reacttraining.com/react-router/web/api/Redirectをご覧ください。リダイレクトで

それは次のようになります。

render() { 
    if (this.state.userIsAuthed) { 
    return <Redirect to='/app' /> 
    } 
    return <LoginInternals /> 
} 

アプリであなたのPOSTを行うことができます場合は、POST成功ハンドラでtrueにuserIsAuthed設定します。

実際に外部でjQueryを使用したい場合は、成功情報をCookieまたはローカルストレージに保存できます。反応ログインルートでは、componentWillMountで、成功情報とそれに応じて状態を更新するためにクッキーまたはローカルストレージを確認できます。