パスポートとJWTをクライアントエンドで使用するにはどうすればよいですか？

Question

私は現在、友人のサッカーチーム向けにカスタムCMSを作成しています。バックエンドには

私はデータベース（MongoDBの）と対話するAPIをしました：アーキテクチャは、次の通りです。

フロントエンドには、テンプレートエンジンのハンドルバーを使用してページを提供する高速サーバーがあります。

現在、私はPassportとJWTを使用してAPIへのリクエストを認証しています。これはログイン時にAPIを照会するのに問題ありません。ユーザーのCookieストレージにJWTを保存していますSPAではなく、ローカル/セッションストレージにアクセスできません）。

私の問題は、管理パネルへのアクセスのためにクライアント側で認証を実装する方法を苦労していることです。クライアントエンドでJWTをデコードし、ユーザーロールを読み取って、ユーザーが管理者の場合は管理者ページを表示するか、フロントエンドの管理セクションにアクセスするためのすべてのリクエストをAPIに送信する必要があります。検証チェックがファイルを提供します。

ご協力いただきますようお願い申し上げます。ありがとうございます。

Answer 1

私は、トークン認証アプローチを使うと、ハードリロードではなく、XHR経由でリクエストを行う方が適していると思います。あなたが取っているアプローチは、セッションベースの認証戦略に適しているようです。 passport-localを使用し、ユーザー名とパスワードで認証します。一度認証されると、ユーザーはセッション変数にサーバー側を格納します。あなたは、その役割とサーバー側のリダイレクトからその役割を確認することができます。

トークンを使用する場合は、トークンをローカルストレージに保存してから、管理パネル上にトークンをローカルストレージから取得してから、そのトークンを使用してサーバーにGET要求を行いますヘッダートークンが有効な場合は、データを送ってページに移入します。それ以外の場合は、エラーを返し、フロントエンドからリダイレクトします。トークンの有効性をチェックしながら空の管理パネルを表示するには、リクエストが完了するまで読み込み画面を表示することができます。