web-dev-qa-db-ja.com

Passport.jsを介して、react-routerとauthentication with authenticationを使用する-可能ですか

そこで、React、Express.js + Passport、Webpackを組み込んだプロジェクトに取り組んでいます。私はすべてを「マスター」にプッシュするという概念を理解していますReact react-routerを介してコンポーネントにして、与えられたルートで表示されているものをハッシュ化することを許可します。それはここでうまく機能すると思います。率直に言うと、Reactは初めてです。

私の懸念は：

1）パスポートを使用してルートを認証できますか？私がreact-routerを正しく理解していれば、たとえば、Reactという名前のコンポーネント__<Application/>_を指す）をExpress app.jsファイルに含めます。ただし、Passportはrouter.get('/myroute', isAuthenticated, callback)でセッションを確認します。react-routerを使用して確認することはまだ可能ですか？

2）さらに、これが可能である場合、ExpressのルートからReactのビューに値を渡す方法を教えてください。通常のビューでは、ルートからそれを渡した場合、_<%= user %>_または_{{user}}_を使用できます。ここでそれは可能ですか？

javascriptnode.jsexpressreactjspassport.js
25
afithings

APIのパスからビューのレンダリングパスを分割します。結局のところ、API呼び出しに認証ロジックを設定できます。

//Auth check middleware
function isAuth(req, res, next) {...}

//API routes
app.post("api/users/login", function() {...});
app.post("api/users/logout", function() {...});
app.get("api/purchases", isAuth, function() {...});
//and so on...

//Wild card view render route
app.use(function(req, res) {
  var router = Router.create({
    onAbort: function(options) {...},
    onError: function(error) {...},
    routes: //your react routes
    location: req.url
  });
  router.run(function(Handler) {
    res.set("Content-Type", "text/html");
    res.send(React.renderToString(<Handler/>));
  });
});

したがって、ビューでサーバー側のレンダリングされたデータをクライアント側に渡す方法を解決する必要があります（同形データ転送技術を選択してください）。

また、クライアント側でのみビューとリダイレクトロジックを作成し、最初にコンポーネントをマウントした後にクライアントで解決される「待機」状態で反応コンポーネントをレンダリングすることもできます（API呼び出しで認証状態を確認します）。

10
shadeglare