2016-09-16 5 views
1

私はトークンを扱うのがとても新しいです。昨日学習を始めました。JWTトークンのプロパティに基づいてフロントエンド(角度)ビューに表示される内容を変更するにはどうすればよいですか?

私はExpressバックエンドAPIを持っています。私はトークンが、任意のAPIエンドポイント/ jsonデータのデータに誰かがアクセスできないようにしていることを理解しています...しかし、JWTが角張っているときにJWTをどのように読み込み/復号化できますか?

I.E.このユーザーはログインしているため、このページを表示できますが、この特定のユーザーはこのイベントの作成者です。したがって、このイベントのショーページでは、招待されたユーザーにはイベントの作成者が表示されますが、イベントの作成者のみが、クリックされるとそのイベントへの削除要求を行います。他のユーザーにはこのボタンは表示されません。

これが可能なのを見る唯一の方法は、ユーザーオブジェクトを含むJWTをフロントエンドでデコードできることです。デコードされたJWTプロパティを持つ変数にアクセスできます。 I.E.、ユーザ名およびユーザID。 `` `

if (decodedJWT.user.username === event.creator.username) { 
DO SOMETHING HERE LIKE DISPLAY A CERTAIN BUTTON 
} 

` ``

感謝を:その方法は、角度でレンダリングされたビューページに、私は次のようなロジックをコーディングすることができます。

app.use('/userinfo', expressJwt({secret: secret})); 

は、ここでは、 /userinfoはJWTとあなたの秘密のフレーズで保護されていることを確認してください:

+1

トークンのクライアント側を復号化することは、最初にjwtを使用するという全目的に反します。それをサーバ側で行い、そこから無関係のデータが必要なものはすべて渡してください。 – charlietfl

+1

JWTは混乱する可能性がありますが、charlieftlは正しいです。クライアント側のトークンをデコードする必要はありません。まだ理解していない方はこれを読んでください:https://jwt.io/introduction/ –

+0

私のコメントに追加するには、JWT *を秘密鍵なしでデコードすることはできません。 –

答えて

0

あなたは、彼がログインしている場合は、ユーザーの詳細を返しますあなたのnodeJSバックエンドでのAPIのポイントを作成する必要があります。

その後、このAPIに対応したルートは、ユーザ情報を返します。

router.get('/get', function (request, response) { 
    response.json({ 
    id: request.user.id, 
    name: request.user.nom, 
    email: request.user.email, 
    role: request.user.role 
    }); 
}); 

フルAPIは/userinfo/getに配置され、JWTトークンによって確保されています。 angularJSで

あなただけログインしていない場合は、サーバーからユーザーオブジェクトまたはエラーが返されます簡単な$http.get('/userinfo/get')を使用して、そのAPIにリクエストを行う必要があります。もちろん

あなたがpass the token to all your $http requestsする必要があります。

+0

素晴らしい説明と明らかに質問に答えます。基本的には、私はjsonユーザーオブジェクトで応答するようにサーバーを設定します。ただし、このユーザーオブジェクトデータは、ユーザーが/ userinfo/getルートを参照するときにのみ送信されます。意味はAngularで、デフォルトでは、そのルートに$ http.getリクエストを行うコントローラでのみ、そのデータを取得します。自分のフロントエンド全体で、そのユーザーjsonオブジェクトデータを「永続」させることをどのように提案しますか? I.E.私がイベントページ(/events/8) ...上にいる場合条件付きをしたいif(event.creator.id === user.id){do stuff} –

+0

^それについて考えた上で上記のコメントに質問してください。より簡単な方法があれば、コミュニティのために共有してください。私の考えはこれです:Angularでは、保護された '/ userinfo/get'ルートへのリクエストを行い、存在する場合はオブジェクトを返すuserObjectCheckファクトリを設定します(ユーザーがログインしている場合、角度インターセプタはトークンを送信しますファクトリのエンドポイントにファクトリがアクセスできるようにします)。今、私はそのユーザーが必要な任意のコントローラで、私はちょうど工場の戻り値と等しい変数を設定し、すべてが動作します。 –

+0

@タイラーはい、工場/サービスは行く方法です。 – gyc

関連する問題